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

不幸的是，在{em> node-sass 中，@use关键字是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'),
            },
          },
        ],
      },
    ],
  },
};

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

2 个答案: