Support Sass @use for partials instead of deprecated @import

[TamaMcGlinn]

Hugo extended 0.72 seems to only support @import, not @use which is preferred.

I'm new to sass, and hugo. I went to the SASS guide, took the first working example on that page that uses a partial (sass include, import, however you want to call it), and had:

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

and next to that, in assets/_base.scss:

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

The resulted site server using hugo server says:

Rebuild failed:

TOCSS: failed to transform "style.scss" (text/x-scss): SCSS processing failed: file "stdin", line 5, col 25: Invalid CSS after "...und-color: base": expected expression (e.g. 1px, bold), was ".$primary-color;" 
Hugo Static Site Generator v0.72.0-8A7EF3CF/extended linux/amd64 BuildDate: 2020-05-31T12:14:23Z

Reload Page

Which can be worked around by changing the @use to @import and referring to $primary-color directly, without the namespace prefix base..

[bep]

You need to watch this project for progress on this:

https://github.com/sass/libsass

I doubt that @import is going away soon ... LibSASS is used by many, including the big Node/JS community.

[EvyBongers]

On the libsass project page, it says that the use of libsass is deprecated and it's unlikely that this feature will be added:

Warning: LibSass is deprecated. While it will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

I can't find and issue for migrating to Dart Sass yet. Should this issue be updated for that or should a new issue be created for moving to Dart Sass?

[michaeltlombardi]

I just ran across this problem myself; it was a little non-obvious to work around and documentation to this point as a limitation note or work towards supporting @use in SCSS files would be enormously helpful.

[bep]

@michaeltlombardi see my work in https://github.com/bep/godartsass -- my main head scratch now is that the upstream project (the Dart Sass Embedded Protocol) is still in beta5, but I suspect this will not take too long to get into Hugo (I will maybe add it as a beta feature, as it seems to work great).

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.