Including css file from node_modules in scss

I tried to include a css from node modules into my sass file like:

@import "node_modules/@tomtom-international/web-sdk-maps/dist/maps";

but it seems to skip it.
I also tried adding the .css extension but without success; gohugo also gives no warning or error.

I also found this similar thread but it contains only a workaround which I don’t desire.

Is it possible to include a .css file in scss?

First, you need to use includePaths option in your sass/scss pipes. Hugo Pipes.

Second, include the css extension in your import path.

e.g.

@import "node_modules/@tomtom-international/web-sdk-maps/dist/maps.css";

I have:

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/@fortawesome/fontawesome-pro/scss/fontawesome";
@import "node_modules/@fortawesome/fontawesome-pro/scss/brands";
@import "node_modules/@fortawesome/fontawesome-pro/scss/regular";
@import "node_modules/@fortawesome/fontawesome-pro/scss/solid";
@import "node_modules/flag-icon-css/sass/flag-icon";
@import "node_modules/leaflet/dist/leaflet.css";

all imports work except the leaflet.css.

The difference is of course the other ones don’t have an extension, and automatically the *.scss file is taken. For *.css files this does not seem to work.

Note I also added the folder to the includePaths.

{{ $style := resources.Get "sass/main.scss" | toCSS (dict "targetPath" "css/style.css" "outputStyle" "compressed" "includePaths" (slice "node_modules/leaflet/dist")) | fingerprint "sha256" }}
{{- $options := (dict "includePaths" (slice "node_modules")) -}}
{{- $style := resources.Get "sass/main.scss" | resources.ToCSS $options -}}

main.scss

@import "leaflet/dist/leaflet";

Tested, works fine.

3 Likes

Thx!

So indeed with "includePaths" (slice "node_modules") and @import "leaflet/dist/leaflet"; it works :slight_smile:

So it’s important to not use the *.css extension.

Now I only wonder why I need to explicitly include "includePaths" (slice "node_modules") as for .scss imports it works without it…

1 Like

I do not know why, but I confirm your findings. For example, this works without specifying includePaths:

@import "node_modules/bootstrap/scss/bootstrap.scss";

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