Use Dart Sass modules in Next.js

Question

I want to support multiple Sass files with Next.js (v10.0.9).

Following the directions, I've installed sass (v1.32.8, under devDependencies).

styles/globals.scss works fine, imported into pages/_app.tsx with import '../styles/globals.scss';.

However, if I add styles/colors.scss containing $base-color: darkblue; and attempt to use it in globals.scss as follows:

@use 'colors';

body {
  color: $base-color;
}

yarn dev reports:

error - ./styles/globals.scss ((webpack)/css-loader/cjs.js??ref--5-oneOf-7-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-7-2!(webpack)/resolve-url-loader??ref--5-oneOf-7-3!(webpack)/sass-loader/cjs.js??ref--5-oneOf-7-4!./styles/globals.scss)

SassError: Undefined variable.

4 │ color: $base-color;

I've tried adding sassOptions with includePaths in next.config.js, changing the @use path, etc. without success.

What am I doing wrong?

Brebber · Accepted Answer · 2021-03-31 07:38:59Z

Seems to be a huddle using @use.

The idea btw. the new technique of @use (and the upcomming way to write SASS in the future as @import is deprecated) is, that members (vars, funcs, mixs) ARE ALLWAYS SET TO A SEPERATED NAMESPACE when they are '@used`.

So, if you @use a file with variables the variables are provided to a seperate namespace which is the name of the file. That means: if you are working with them you need to call them by filename.varibale.

If you want to use the variables with another (or no additional) namespace you need explicite to notice that to the '@use-rule'.

To your example that means:


// simple @use a file 
// --> then call members (vars, funcs, mixs) with namespace
// namespace = name of file where variables come from

@use 'colors';

body {
  color: colors.$base-color;
}


// @use file and set namespace 
// --> call members with this namespace
//
// ### Note the intended advantage: 
// In this case you are able to work in the var file without prefixes/suffix
// Variables conflicts with different (external!) modules can be handled 
// or do not arise at all this way

@use 'colors' as color;
// color vars in file 'colors' now can be: 
// $base, $primary, $red, $green, ... only

body {
  color: color.$base;
}


// @use a file without adding a namespace
// --> you can call variables the traditional way as set in the file
// in this (by the developer of SASS NOT intended) case advice namespace as '*'

@use 'colors' as *;

body {
  color: $base-color;
}

More information: https://sass-lang.com/documentation/at-rules/use

Serves me right for not reading the rest of the documentation! Works perfectly!

Collectives™ on Stack Overflow

Use Dart Sass modules in Next.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related