How to install Dart Sass using Docker image?

[gavlinski]

Hi!

I have a similar problem described in #1034, but I'm using Docker to build and test changes using my local machine. I've upgraded all modules to last versions using hugo mod get -u and then migrate hugomods from "hugo:0.124.1" to "hugo:0.138.0".

How can I install Dart Sass and fix the error below? Should I use another image tag? Any tips will be appreciated.

$ docker run --rm -v $(pwd):/src -v $(pwd):/modules -e HUGO_CACHEDIR="/modules" -p 1313:1313 hugomods/hugo:0.138.0 hugo server --bind 0.0.0.0 --buildDrafts
Watching for changes in /src/{archetypes,assets,content,data,i18n,layouts,package.json}
Watching for config changes in /src/config/_default, /src/config/development, /src/go.mod
Start building sites … 
hugo v0.138.0-ad82998d54b3f9f8c2741b67356813b55b3134b9+extended linux/amd64 BuildDate=2024-11-06T11:22:34Z VendorInfo=hugomods

Built in 1975 ms
Error: error building site: TOCSS-DART: failed to transform "hb/scss/index.scss" (text/x-scss). You need to install Dart Sass, see https://gohugo.io//functions/css/sass/#dart-sass: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information

$ docker run --rm -v $(pwd):/src -v $(pwd):/modules -e HUGO_CACHEDIR="/modules" -p 1313:1313 hugomods/hugo:0.138.0 hugo env
hugo v0.138.0-ad82998d54b3f9f8c2741b67356813b55b3134b9+extended linux/amd64 BuildDate=2024-11-06T11:22:34Z VendorInfo=hugomods
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.23.2"
github.com/sass/libsass="3.6.6"
github.com/webmproject/libwebp="v1.3.2"

[razonyang]

Hi, I suggest using the hugomods/hugo:dart-sass or hugomods/hugo:exts tag.

BTW, there are non-root tags available now, to use it by appending the -non-root into the tag, such as hugomods/hugo:exts-non-root or hugomods/hugo:exts-non-root-<version> for particular version.

You may need to change the project ownership to yours before switching to non-root images, to avoid encounting permission issues.

sudo chown -R username:groupname .
sudo chown -R username:groupname /path/to/hugo-cache

Moreover, if you require the Hugo deploy feature (hugo deploy), which since v0.137.0 will not included into Hugo by default, so you'll need to use the ci* tags.

Here is a page to Choose a Hugo Docker image.

[gavlinski]

Thank you very much! Now I was able to understand the situation better. It worked using hugomods/hugo:exts-0.138.0 tag.

However, some warnings were displayed as follows:

WARN Dart Sass: /modules/modules/filecache/modules/pkg/mod/github.com/hbstack/hb@v0.15.3/assets/hb/scss/index.tmpl.scss:3:8: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import
WARN Dart Sass: /modules/modules/filecache/modules/pkg/mod/github.com/hbstack/hb@v0.15.3/assets/hb/scss/index.tmpl.scss:6:8: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import
WARN Dart Sass: /modules/modules/filecache/modules/pkg/mod/github.com/hbstack/hb@v0.15.3/assets/hb/scss/index.tmpl.scss:67:8: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import
WARN Dart Sass: /modules/modules/filecache/modules/pkg/mod/github.com/hbstack/hb@v0.15.3/assets/hb/scss/index.tmpl.scss:68:8: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import
WARN Dart Sass: /modules/modules/filecache/modules/pkg/mod/github.com/hbstack/hb@v0.15.3/assets/hb/scss/index.tmpl.scss:69:8: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_functions.scss:206:10: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.

More info and automated migrator: https://sass-lang.com/d/import
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_functions.scss:211:10: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.

More info and automated migrator: https://sass-lang.com/d/import
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_variables.scss:341:26: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.

More info and automated migrator: https://sass-lang.com/d/import
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_functions.scss:10:29: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use math.unit instead.

More info and automated migrator: https://sass-lang.com/d/import
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_functions.scss:10:50: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use math.unit instead.

More info and automated migrator: https://sass-lang.com/d/import
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_functions.scss:184:9: red() is deprecated. Suggestion:

color.channel($color, "red", $space: rgb)

More info: https://sass-lang.com/d/color-functions
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_functions.scss:185:9: green() is deprecated. Suggestion:

color.channel($color, "green", $space: rgb)

More info: https://sass-lang.com/d/color-functions
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_functions.scss:186:9: blue() is deprecated. Suggestion:

color.channel($color, "blue", $space: rgb)

More info: https://sass-lang.com/d/color-functions
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_functions.scss:36:10: red() is deprecated. Suggestion:

color.channel($color, "red", $space: rgb)

More info: https://sass-lang.com/d/color-functions
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_functions.scss:36:23: green() is deprecated. Suggestion:

color.channel($color, "green", $space: rgb)

More info: https://sass-lang.com/d/color-functions
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_reboot.scss:502:2: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_reboot.scss:503:2: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_type.scss:37:4: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_type.scss:38:4: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls
WARN Dart Sass: file:///modules/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.3.3 incompatible/scss/_type.scss:39:4: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls
WARN Dart Sass: 344 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.

I tried to use the non-root image before, but even changing the permissions locally, it caused the error "Error: error building site: failed to acquire a build lock: open /src/.hugo_build.lock: permission denied".

[razonyang]

However, some warnings were displayed as follows:

Upgrade bootstrap to main branch should have less warning, but there are still deprecated warnings, see also twbs/bootstrap#40849.

hugo mod get github.com/twbs/bootstrap@main

But it's a warning, not an error, so you can ignore it for now.

failed to acquire a build lock: open /src/.hugo_build.lock: permission denied".

You can try deleting the file and trying again.

In my experience, it works with non-root images after chown the owner to myself (1000:1000). There might be unexpected case I haven't thought about.

[razonyang]

To ignore those warnings, you can also downgrade Docker image to 0.136.5 which sass version is 1.77.4.

[gavlinski]

Great! I was able to get it working with the exts-non-root-0.136.5 image using this tip.

These were the commands I needed to run:

$ sudo chown -R myuser:domain\ users .
$ id -u
123456789
$ docker run --rm -v $(pwd):/src -v $(pwd):/modules -e \
  HUGO_CACHEDIR="/modules" -p 1313:1313 -u 123456789 \
  hugomods/hugo:exts-non-root-0.136.5 server --buildDrafts

Thank you very much for your valuable help! ❤️