在 Next.js 中使用 Dart Sass 模块

Question

我想用 Next.js (v10.0.9) 支持多个 Sass 文件。

按照directions，我安装了sass（v1.32.8，在devDependencies下）。

styles/globals.scss 工作正常，使用 import '../styles/globals.scss'; 导入 pages/_app.tsx。

但是，如果我添加包含 $base-color: darkblue; 的样式/colors.scss 并尝试在 globals.scss 中使用它，如下所示：

@use 'colors';

body {
  color: $base-color;
}

yarn dev 报告：

错误 - ./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：未定义的变量。

4│颜色：$base-color;

我尝试在 next.config.js 中添加sassOptions 和includePaths，更改@use 路径等，但均未成功。

我做错了什么？

Answer 1

似乎是使用@use 的一群人。

顺便说一句。 @use 的新技术（以及将来编写 SASS 的新方法 @import 已弃用）是，成员（变量、函数、混合）在“@used”时始终设置为单独的命名空间.

因此，如果您 @use 一个带有变量的文件，则这些变量将提供给一个单独的命名空间，即文件的名称。这意味着：如果您与他们合作，您需要通过filename.varibale 与他们联系。

如果您想将变量与另一个（或没有其他）命名空间一起使用，您需要明确注意“@use-rule”。

对于您的示例，这意味着：

// 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;
}

更多信息：https://sass-lang.com/documentation/at-rules/use