# @import in .css files fail to load

**URL:** <https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895>\
**Category:** support\
**Created:** [December 13, 2022, 10:02pm UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895 "2022-12-13T22:02:30Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![schalkneethling](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@schalkneethling](https://discourse.gohugo.io/u/schalkneethling)\
**Post date:** [December 13, 2022, 10:02pm UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/1 "2022-12-13T22:02:30Z")

</div>

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:

```css
@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:

```auto
{{ $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:

```auto
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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 13, 2022, 10:31pm UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/2 "2022-12-13T22:31:19Z")

</div>

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:

```auto
@import "lib/reset";

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

```

Then change your partial to:

```auto
{{ $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.

---

<div class="post-metadata">

**Author:** ![schalkneethling](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@schalkneethling](https://discourse.gohugo.io/u/schalkneethling)\
**Post date:** [December 13, 2022, 10:57pm UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/3 "2022-12-13T22:57:57Z")

</div>

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. 🙂 - Thanks again for the help.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 13, 2022, 11:09pm UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/4 "2022-12-13T23:09:43Z")

</div>

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

In the root of your project directory:

```auto
npm install -D postcss postcss-cli autoprefixer

```

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

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

```

Then change your partial to:

```auto
{{ $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:

```auto
::placeholder {
  color: gray;
}

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 13, 2022, 11:12pm UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/5 "2022-12-13T23:12:58Z")

</div>

> [@schalkneethling](#):
>
> how would it work when deploying to Netlify

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

---

<div class="post-metadata">

**Author:** ![schalkneethling](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@schalkneethling](https://discourse.gohugo.io/u/schalkneethling)\
**Post date:** [December 13, 2022, 11:42pm UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/6 "2022-12-13T23:42:32Z")

</div>

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

> **[PostCSS](https://gohugo.io/hugo-pipes/postcss/)**
>
> Process CSS files with PostCSS, using any of the available plugins.

> 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. 🎉

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 13, 2022, 11:43pm UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/7 "2022-12-13T23:43:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 13, 2022, 11:46pm UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/8 "2022-12-13T23:46:37Z")

</div>

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](https://github.com/gohugoio/hugo/issues/7333#issuecomment-1048571703)

---

<div class="post-metadata">

**Author:** ![schalkneethling](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@schalkneethling](https://discourse.gohugo.io/u/schalkneethling)\
**Post date:** [December 13, 2022, 11:54pm UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/9 "2022-12-13T23:54:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![schalkneethling](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@schalkneethling](https://discourse.gohugo.io/u/schalkneethling)\
**Post date:** [December 13, 2022, 11:55pm UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/10 "2022-12-13T23:55:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 14, 2022, 1:00am UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/11 "2022-12-14T01:00:45Z")

</div>

Regarding documentation, take a look at this preview:

[https://deploy-preview-1931--gohugoio.netlify.app/hugo-pipes/postcss/](https://deploy-preview-1931--gohugoio.netlify.app/hugo-pipes/postcss/)

Is that clearer, and sufficient?

---

<div class="post-metadata">

**Author:** ![schalkneethling](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@schalkneethling](https://discourse.gohugo.io/u/schalkneethling)\
**Post date:** [December 14, 2022, 1:18am UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/12 "2022-12-14T01:18:27Z")

</div>

Yeah, that is much better! Thanks.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [December 16, 2022, 1:19am UTC](https://discourse.gohugo.io/t/import-in-css-files-fail-to-load/41895/13 "2022-12-16T01:19:11Z")

</div>

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