Sass | PostCSS not found in file cache

support
1

I went through the topics but even if similar error occour previously, the proposed solutions didn’t work in my case.

The code below works fine as long I don’t pass $toCssOptions to resources.ToCSS filter. When I run it via hugo server I get Error: Error building site: POSTCSS: failed to transform "scss/style.css" (text/css): resource "scss/css/style.scss_df6f7a8f87659d1116ec85e6c1766534" not found in file cache

  {{ $toCssOptions := (dict "outputStyle" "compressed" "enableSourceMap" false) }}

  {{ if .Site.IsServer }}
  {{ $toCssOptions := (dict "outputStyle" "compressed" "enableSourceMap" true) }}
  {{ end }}

  {{ $styles := resources.Get "scss/style.scss" | resources.ToCSS $toCssOptions | resources.PostCSS | resources.Minify | resources.Fingerprint }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">

I use kross-hugo theme.

I have hugo installed via brew with --HEAD.

Hugo Static Site Generator v0.77.0-DEV/extended darwin/amd64 BuildDate: unknown
GOOS=“darwin”
GOARCH=“amd64”
GOVERSION=“go1.15.3”

Repo git@github.com:Appdy/site.git. The snippet mention above is in layouts/partials/head.html line 25.

As you see, I already use extended version. Any ideas?

Thanks

2

This should be =, not :=.

I don’t know if this is the only issue; it would be easier to help if we can see your site code. See: Requesting Help

3

Thanks @pointyfar , I sorted that. I also shared link to repo in original post, the branch name is new.

4

Have you installed postcss and postcss-cli?

See https://gohugo.io/hugo-pipes/postcss/#readout.

5

@jmooring thanks for guidance, I have them installed globally, but it still doesn’t work.

npm list -g | grep -E '(postcss|postcss-cli|autoprefixer)'
├─┬ autoprefixer@10.0.1
│ └── postcss-value-parser@4.1.0
├─┬ postcss@8.1.4
└─┬ postcss-cli@8.1.0
  ├─┬ postcss-load-config@3.0.0
  ├─┬ postcss-reporter@7.0.1

And amended template file snippet to:

  {{ $toCssOptions := (dict "outputStyle" "compressed" "enableSourceMap" false) }}
  {{ $postCSSOptions := (dict "noMap" true)}}

  {{ if .Site.IsServer }}
  {{ $toCssOptions = (dict "outputStyle" "compressed" "enableSourceMap" true) }}
  {{ $postCSSOptions = (dict "noMap" false)}}
  {{ end }}

  {{ $styles := resources.Get "css/style.scss" | resources.ToCSS $toCssOptions | resources.PostCSS $postCSSOptions | resources.Minify | resources.Fingerprint }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">

And created postcss.config.js in project dir with suggested content:

module.exports = {
  plugins: [
    require('autoprefixer'),
    ...process.env.HUGO_ENVIRONMENT === 'production'
      ? [purgecss]
      : []
  ]
}

EDIT:
Actually it shows the same error even after removing $toCssOptions from resources.ToCSS parameter list.

{{ $styles := resources.Get "css/style.scss" | resources.ToCSS | resources.PostCSS | resources.Minify | resources.Fingerprint }}

Error: Error building site: POSTCSS: failed to transform "css/style.css" (text/css): resource "scss/css/style.scss_4853eb546e7a6c0898ed71feae7357c0" not found in file cache

6 
git clone --recurse-submodules git@github.com:Appdy/site.git
cd site
hugo

Error: Error building site: POSTCSS: failed to transform “css/style.css” (text/css): resource “scss/css/style.scss_432e8a83de7c44f3fe0cc7ac93f1ed8d” not found in file cache

npm init -y
npm install -D postcss postcss-cli autoprefixer
hugo

Error: Error building site: POSTCSS: failed to transform “css/style.css” (text/css): ReferenceError: purgecss is not defined

npm install -D @fullhuman/postcss-purgecss
hugo

Error: Error building site: POSTCSS: failed to transform “css/style.css” (text/css): ReferenceError: purgecss is not defined

Last step, add the following line to the top of postcss.config.js:

const purgecss = require('@fullhuman/postcss-purgecss')

Note that I installed the npm modules locally, not globally. I avoid global npm installs whenever possible (personal preference, been bitten before).

2 Likes
7

@jmooring Amazing, it works! Thanks a lot!

ps. I think it should be added automatically as an option when we generate new project. Many people has this issue, something like --with-postcss would prevent many problems.

8

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