Hugo Pipes - PostCSS - How to use global autoprefixer

support
1

I made a test environment where I’m trying to use the global autoprefixer (npm install -g autoprefixer), as in the documentation, however, I’m getting the following error:

error
error.jpg1015×268 223 KB

When I install the autoprefixer package locally (npm install autoprefixer -D), it works.

_baseof.html source:

{{ $styles := resources.Get "scss/main.scss" | resources.ToCSS | resources.PostCSS (dict "config" "postcss.config.js") }}
<link rel="stylesheet" href="{{ $styles.Permalink }}">

postcss.config.js source:

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

Am I doing something wrong or is the documentation confusing?

1 Like
2

I have Autoprefixer in my package.json - so local reference for the project (node_modules). And that works fine with Hugo’s pipe.

3

I have the same problem right now.

It always worked with global installations only. Recently I re-installed all modules needed and get the same error message:

Cannot find module autoprefixer.

Maybe there was a change/is a bug in one of the modules?!

(Local installation of all npm/node modules works fine.)

4

Yes, but in the documentation it says:

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

5

That’s true, but did you try with local packages in package.json?

6

The difference I see to my set up (have it in a partial css.html) is that you reference the postcss.config.js which is not necessary. PostCSS is looking for that file as default. Perhaps that causes the issue. Here’s the content of my partial css.html:

{{ $inServerMode := .Site.IsServer }}
{{ $sass         := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . }}
{{ $sassIncludes := (slice "assets/dependencies/" "assets/scss/" "assets/scss/vendors/") }}
{{ $cssTarget    := "css/styles.css" }}
{{ $cssOpts      := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true "includePaths" $sassIncludes) (dict "targetPath" $cssTarget "includePaths" $sassIncludes "outputStyle" "compressed") }}

{{ if or ($inServerMode) (eq .Site.Params.env "LOCAL") }}

    {{ $css := $sass | toCSS $cssOpts }}
    <link rel="stylesheet" href="{{ $css.Permalink | absURL }}" media="screen">

{{ else }}

    {{ $css := $sass | toCSS $cssOpts | resources.PostCSS | fingerprint }}
    <link rel="stylesheet" href="{{ $css.Permalink | absURL }}" integrity="{{ $css.Data.Integrity }}" media="screen">

{{ end }}
7

Yes, I did and it works. But I want to remove package.json from my project, if is possible.

8

Ah, I see. Why?

9

Because if the documentation says that you can use global packages, there is no need to have a package.json to manage local packages. This way I can make my project cleaner.

10

I take it you’ve also installed postcss-cli globally? If so, I’d guess this is a paths issue. Perhaps post your repo so someone can look at it.

As of .45 Hugo no longer required a global install of the modules, but, though it seems unlikely, there could be something amiss with using them now since that change.

11

Yes, I installed postcss-cli globally.

My repo is just a test hugo new site with the mentioned above baseof.html and postcss.config.js

Hugo version
Hugo Static Site Generator v0.52/extended darwin/amd64 BuildDate: unknown

12

For anyone else struggling with this issue I found it is a result of using node installed via nvm, whereby NODE_PATH is not set and thus globally installed modules are not requireable.

You can work around it by either installing the module locally to the project, or setting NODE_PATH manually:

$ export NODE_PATH=$NODE_PATH:`npm root -g`
6 Likes