SASS 尝试使用@use 规则时出现模块错误

Question

我是 SCSS 新手，在使用 @use 规则时遇到问题。

sass/helpers/_variables.scss

$companyColor: #d60048;

header/header.scss

@use '../sass/helpers/_variables' as variables;

.app-header {
    background-color: variables.$companyColor;
}

我收到一个错误：

ERROR in ./src/Header/Header.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--8-2!./src/Header/Header.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...olor: variables": expected expression (e.g. 1px, bold), was ".$companyColor;"
        on line 4 of C:\MyProject\Client\src\Header\Header.scss
>>     background-color: variables.$companyColor;
   -------------------------------^

如有任何帮助，我们将不胜感激。

Answer 1

不幸的是，@use 关键字在 node-sass 中是 not supported（还）。让我们希望他们在不久的将来带来支持。到那时，您可以使用 @import 语法。

Answer 2

我遇到了同样的问题。我不得不删除 node-sass 和 sass （全局）。然后我安装了 sass （本地）。你需要更换编译器

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // Prefer `dart-sass`
              implementation: require('sass'),
            },
          },
        ],
      },
    ],
  },
};

SASS 尝试使用@use 规则时出现模块错误

SASS Module Error when trying to use @use rule

sass

node-sass

scss-mixins