@import in .css files fail to load

support
1

Hey there,

I am using plain CSS with Hugo stored in the assets folder so, assets/css. In the root of css I have a file called site.css which includes a couple of @import declarations, for example:

@import "lib/reset.css";

@import "vars/color-palette.css";
@import "vars/layout.css";
@import "vars/typography.css";

Inside partials/head.html I have the following:

{{ $css := resources.Get "css/site.css" }} {{ $styles := $css |
resources.Minify | resources.Fingerprint }}
<link
  rel="stylesheet"
  href="{{ $styles.RelPermalink }}"
  integrity="{{ $styles.Data.Integrity }}"
/>

After running hugo serve and opening the page in the browser, I get number of 404 errors:

GET http://localhost:1313/css/vars/layout.css net::ERR_ABORTED 404 (Not Found)

Essentially none of the CSS files I am importing is found. Wondering what step I am missing here. Thank you in advance for your help.

Schalk

2

Files in the assets directory are global resources, and they are not published to public unless they are (a) captured as a resource (using resources.Get, resources.GetMatch, etc.), and (b) the object of the .Permalink, .RelPermalink, or .Publish methods.

Your site.css file meets both of those requirements, so it is published to the public directory.

You have two choices:

Option 1 (preferred)

CSS is valid SCSS, so can you bundle the files together.

First remove the extension from the import statements:

@import "lib/reset";

@import "vars/color-palette";
@import "vars/layout";
@import "vars/typography";

Then change your partial to:

{{ $css := resources.Get "css/site.css" }}
{{ $styles := $css | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">

Option 2

Move the dependencies to the static directory with the appropriate paths.

1 Like
3

Thanks so much, @jmooring, I thought that might be the case. Would running the site.css through PostCSS change this at all? I was thinking of doing that to have it run autoprefixer on my CSS. The one thing I am not super keen about is having to install postcss and any plugins globally.

I see you can (must) have them managed via package.json if you are using the snap version of Hugo. I have not dug anymore into what exactly the snap version is but, is there a way to have PostCSS locally installed without the snap version?

I partially ask because how would it work when deploying to Netlify? I guess you can use a pre-build where you install all the things globally. Anyhow, I do not want to completely derail this into a completely different topic. :slight_smile: - Thanks again for the help.

4

You don’t need to install the Hugo snap package.

In the root of your project directory:

npm install -D postcss postcss-cli autoprefixer

Then create postcss.config.js in the root of your project directory:

module.exports = {
  plugins: [
    require('autoprefixer'),
  ]
}

Then change your partial to:

{{ $css := resources.Get "css/site.css" }}
{{ $styles := $css | toCSS | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">

To test, place this in one of your CSS files:

::placeholder {
  color: gray;
}
1 Like
5

Netlify will detect the package.json file and install the required dependencies.

1 Like
6

Thank so much. I was basing my comment on the docs here:

Hugo Pipe’s PostCSS requires the postcss-cli JavaScript package to be installed in the environment (npm install -g postcss postcss-cli ) along with any PostCSS plugin(s) used (e.g., npm install -g autoprefixer ).

If you are using the Hugo Snap package, PostCSS and plugin(s) need to be installed locally within your Hugo site directory, e.g., npm install postcss-cli without the -g flag.

Great to know one is not locked into installing it globally without the snap package. :tada:

7

Yes, that documentation needs some love. It’s out of date. On my list…

8

If you’re a Windows user, and the path to your project directory contains a space…
https://github.com/gohugoio/hugo/issues/7333#issuecomment-1048571703

1 Like
9

Thanks, I am on a Mac, but good to know. Thanks for sharing.

10

I am happy to help update the docs if there is an issue you can point me to. Also happy to create an issue if need be.

11

Regarding documentation, take a look at this preview:

https://deploy-preview-1931--gohugoio.netlify.app/hugo-pipes/postcss/

Is that clearer, and sufficient?

12

Yeah, that is much better! Thanks.

13

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.