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.
4 Likes
Thx!
So indeed with "includePaths" (slice "node_modules")
and @import "leaflet/dist/leaflet";
it works
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";
system
Closed
June 3, 2020, 12:04pm
8
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.