Css file in public/ doesn't contain modifications to sass files

support
1

Hello,
I am building a website using the sam theme, which use hugo pipes and sass files.
When I make a modification to a sass file, like for example changing the background color, it is taken into account when doing locally hugo serve from the command line.
I am using netlify, and I manage to build the site without error, but the modifications to the sass files are not taken into account (ie the appearance remains like the default)
I have noticed that the .content file under resources/_gen/assets/sass/sass/ has the new color, but that the css file under public/css/ has the old color, meaning that for some reason the css file under public doesn’t include the modifications.
I thought it might have something to do with the links in the theme’s css.html, but I am not sure what to change.
I am still new to website building, css and hugo, and figuring it out. Any help is greatly appreciated.
Thanks!

2

I haven’t dug everywhere, but looking at the partial you linked to, I don’t think the sam theme will use static/css/style.css, but instead uses the stylesheet built by hugo pipes (the one under resources/_gen/assets/sass/sass/ ).

I wonder if the problem you’ve got with netlify is to do with git submodules? How have you loaded the theme (i.e. is it a submodule)? How did you modify the SASS file?

If you’re using a submodule, you should be modifying the theme itself, but instead, override elements you want to change. So for example, if you want to make changes to the stylesheet, make a copy of the file in /themes/hugo-theme-sam/assets/sass and put them in /assets/sass. Then make modifications to your version of the stylesheet.

3

Thanks for your reply.
Yes, netlify requires to add hugo themes as a submodule, so that’s what I did.
Up to now, I have modified the sass files directly in the theme. I have followed your advice to copy assets/ to the root and modify the files there, but it didn’t change the result in the netlify build.
Also, when I run hugo locally from the command line, the css file created under public/ doesn’t contain the new color. I am not sure if that was clear in my first post. So even locally, the css created by the hugo build is different than what is shown when I run hugo serve, and I’m not sure why.

4
  1. If you’ve been messing with files stored in a submodule, you might have caused some confusion in git…so it’s worth looking into that.
  2. When you run hugo and look at your /public directory, which css file are you referring to? The one named css/style.css or the one with fingerprinting (i.e. style.min.<fingerprint>.css)?
  3. Have you read the updated README for the theme? The author updated it yesterday in response to a similar question.
  4. Can you share a link to your git repository?
5
  1. I don’t get any git errors. But maybe I need to redo the process of getting the theme.
  2. I refer to the minified css file with fingerprinting.
  3. I have seen the question but I don’t think it’s related to my problem.
    I am sure there is a very simple solution to my issue, where my file structure is wrong or the links in the css.html don’t work. But I am not yet able to see it because I am very new to all of this.
    Thank you for your time.
  4. The repo is here.
6

Thanks for sharing your git repository.

Two things I’ve noticed:

  1. The theme isn’t installed as a submodule. I recommend deleting the hugo-theme-sam folder, and following the instructions again..
  2. When I compared the _vars.sass file in the theme directory and your own version, I can’t see any difference. Have you committed your changes?
7

I’ve cloned your site now, and I can see the CSS changes you’ve made from the default (background is white, not dark grey).

So it seems the problem is with the build on Netlify. After you’ve made the changes suggested above (i.e. making sure the theme is in a submodule) can you post the log from the last Netlify build?

8

You are right, the theme was not installed as a submodule. I had first installed it using git clone, and hadn’t deleted it before doing git submodule, so I guess it didn’t work.
Once installed as a submodule, I get a /sass/ folder at root level which I can modify. When I do so, this breaks the netlify build, which until then worked properly. The reason is that I need to install postcss-cli and autoprefixer, as shown in the following message in the netlify log

ERROR 2020/01/15 11:47:44 error: failed to transform resource: POSTCSS: failed to transform “css/main.css” (text/css): PostCSS not found; install with “npm install postcss-cli”. See PostCSS | Hugo

I followed the instructions and installed them using npm -g.
However I am not sure how this will impact the netlify build. Do I need to copy a particular file to my starting folder and push it to the repo to get postcss to work?

Thanks again

9

I’m not sure as I’ve not needed to use postcss with any of my sites.

However, this came up from searching the hugo forums

So I think as long as you commit your resources folder, netlify doesn’t need to use postcss.

If the problem is with a netlify deploy, you may find more help in their community Search results for 'postcss' - Netlify Support Forums

10

I agree that now that I have identified the issue, I can ask on the netlify forum for more info on the postcss workflow.
Thank you so much for your help!