# POSTCSS transform error

**URL:** <https://discourse.gohugo.io/t/postcss-transform-error/24929>\
**Category:** support\
**Created:** [April 21, 2020, 5:43pm UTC](https://discourse.gohugo.io/t/postcss-transform-error/24929 "2020-04-21T17:43:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cloud-nine](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cloud-nine/32/11289_2.png) [@cloud-nine](https://discourse.gohugo.io/u/cloud-nine)\
**Post date:** [April 21, 2020, 5:43pm UTC](https://discourse.gohugo.io/t/postcss-transform-error/24929/1 "2020-04-21T17:43:34Z")

</div>

Preprocessor for vendor specific css not working on windows 10.

```auto
POSTCSS: failed to transform "styles.css" (text/css): resource "css/styles.css_674d3a8c056e8697f10ad004211806b8" not found in file cache

```

1. Installed postcss and autoprefixer (and added to path)

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

```

1. added postcss.config.js to root

```auto
module.exports = {
	plugins: {
		autoprefixer: {
			browsers: [
                "Android 2.3",
                "Android >= 4",
                "Chrome >= 20",
                "Firefox >= 24",
                "Explorer >= 8",
                "iOS >= 6",
                "Opera >= 12",
                "last 2 versions",
                "Safari >= 6"
                ]
		}
	},
}

```

1. testing out postCSS (on extended most recent version) in the hugo code causes error

```auto
{{ $styles := resources.Get "styles.css" | postCSS}}
{{ $syntax := resources.Get "syntax.css" }}
 {{ $stylesCustom := resources.Get "stylesCustom.css" }}
{{ $styles = slice $styles $syntax $stylesCustom | resources.Concat "css/bundle.css" | minify |fingerprint }}

<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" />

```

1. Checked binary locations

“We look for the postcss binary in 1) node\_modules/postcss-cli/bin/ or 2) PATH…If not found we fall back to cached resources (if found)” - Bep

Windows puts the packages here:

C:\Users-----\AppData\Roaming\npm\node\_modules\postcss-cli\bin\postcss  
C:\Users-----\AppData\Roaming\npm\node\_modules\autoprefixer\bin\autoprefixer

Hugo still looks in the cache, which is empty. On that note, configured cache in config here: and there’s not yet any bundles in there.

```auto
resourceDir = "/resources/"
[caches]
[caches.assets]
dir = ":resourceDir/_gen"
maxAge = "10s"

```

Windows thing, or is this missing something? (Also, is this cache config handled properly?)  
Thanks

---

<div class="post-metadata">

**Author:** ![gjadmiraal](https://avatars.discourse-cdn.com/v4/letter/g/f6c823/32.png) [@gjadmiraal](https://discourse.gohugo.io/u/gjadmiraal)\
**Post date:** [May 12, 2020, 1:40pm UTC](https://discourse.gohugo.io/t/postcss-transform-error/24929/2 "2020-05-12T13:40:32Z")

</div>

I had the same issue, which made me find this post. Although my setup is not the same as yours, as I am using Docker to run and build with Hugo…

When I didn’t install `postcss-cli` and `autoprefixer` globally, but had them in the projects `node_modules`, Hugo cannot properly process **postCSS** and throws the mentioned error.

So, the error is not just a Windows issue. But probably the issue of the global module cache is. But wouldn’t that make it more of a node problem?

---

<div class="post-metadata">

**Author:** ![cloud-nine](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cloud-nine/32/11289_2.png) [@cloud-nine](https://discourse.gohugo.io/u/cloud-nine)\
**Post date:** [May 12, 2020, 5:37pm UTC](https://discourse.gohugo.io/t/postcss-transform-error/24929/3 "2020-05-12T17:37:46Z")

</div>

The fix for me was to bring everything npm into the project locally.

If you need to, go fully through npm scripts again. Then set up your packages.json properly. Mine is like this (with the purge at the moment):

```auto
module.exports = {
  plugins: {
      '@fullhuman/postcss-purgecss': {
          content: [
              './layouts/**/*.html',
              './assets/js/*.js',
              './static/js/*.js'
            ],
          whitelist: [
              'highlight',
              'language-bash',
              'pre',
              'video',
              'code',
              'content',
              'h3',
              'h4',
              'ul',
              'li'
          ]
      },
      autoprefixer: {},
      cssnano: {preset: 'default'}
  }
};

```

Finally, make sure you have all of your files in the correct directories. Put all your global css and js in assets/. Everything should work after that.

You can do something like this in your head

```auto
{{- $sassMain := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sassMain.scss" . -}}

{{- $sassIncludes := (slice "assets/sass-includes/" "node_modules") -}}
<!-- options based on production variable ------------------------------------>
{{- $sassOpts := dict "targetPath" "css/main.css" "includePaths" $sassIncludes -}}
{{- if (in (slice (getenv "HUGO_ENV") hugo.Environment) "production") -}}
{{- $sassOpts = merge $sassOpts (dict "outputStyle" "compressed" "enableSourceMap" true) -}}
{{end}}

{{- $sassBundle := slice $sassMain | resources.Concat "sass/sassBundle.scss" | resources.ExecuteAsTemplate "sass/sassBundleParsed.scss" . | toCSS $sassOpts -}}

{{- if (eq (getenv "HUGO_ENV") "production") -}}
{{- $mainBundle = $mainBundle | postCSS | minify | fingerprint "sha512" -}}
{{end}}
<link rel="stylesheet" href="{{- $mainBundle.RelPermalink -}}" integrity="{{- $mainBundle.Data.Integrity -}}"/>

```

---

<div class="post-metadata">

**Author:** ![Merovex](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/merovex/32/8236_2.png) [@Merovex](https://discourse.gohugo.io/u/Merovex)\
**Post date:** [December 11, 2021, 9:52pm UTC](https://discourse.gohugo.io/t/postcss-transform-error/24929/4 "2021-12-11T21:52:19Z")

</div>

I just ran into the same problem. I did a failed upgrade to Tailwind 3, and when I downgraded this happened. I reinstalle `postcss-cli` and `autoprefixer` both on the site & in the theme.