[SOLVED] Hugo fails to import regular .css file @import in .scss

support
1

I’m using Hugo’s built-in SCSS compilation feature, with a single entry point named main.scss.

Here’s how I call the file:

{{ $options := (dict "targetPath" "/css/main.min.css" "outputStyle" "compressed" "enableSourceMap" true) }}
{{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

Here’s what’s on top on my main.scss file:

@import "node_modules/bulma/bulma";
@import "node_modules/highlight.js/styles/github-gist.css";
@import "node_modules/slick-carousel/slick/slick";
@import "variables";
@import "nav";
@import "home";
@import "about";

It seems that Hugo cannot import the regular .css file (github-gist.css) and simply ignores it. If I go and compile/serve the site, I get no error from the command line, but in Firefox’ DevTools, I get this error when I go in the “Style Editor” tab:

Style sheet could not be loaded. http://localhost:1313/css/node_modules/highlight.js/styles/github-gist.css

Anyone has an idea how I should import that file? Or is it a bug?

2

You can copy it to your assets folder and rename it to scss. That definitely works.

My workflow: I don’t use the node_modules files directly but copy them via npm script to my assets folder. From there I import them, rename and change them if necessary and compare them later to the originals in case of vendor updates.

Example: cp ./node_modules/modern-normalize/modern-normalize.css ./assets/scss/base/_modern-normalize.scss

Hope this helps.

3

Thanks for the suggestion Leo!

I wish I could reference the node_modules files directly, but this will do the trick for now. :slight_smile:

4

Basically you can but in case of SCSS it’s different. But don’t underestimate the advantage of doing up front a bit more work for copying but afterwards being able to edit the (former) node_modules files and automatically update them later on. This is extremely useful if you work with packages like colors.css or frameworks like Tachyons.

5

See here Including css file from node_modules in scss