SassError:无效的CSS预期表达式(例如1px，粗体)

Question

我正在学习react中的sass，但我遇到了这个错误，找不到答案。我安装了node sass，一切都编译得很好，但当我尝试导入变量时，我无法使用它们

./src/App/sass/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App/sass/styles.scss)
SassError: Invalid CSS after "...: mis-variables": expected expression (e.g. 1px, bold), was ".$default-font;"
on line 31 of src/App/sass/styles.scss
>>     font-family: mis-variables.$default-font;
------------------------------^

styles.scs:

/* Variables */
@use "mis-variables";
/* SASS Code */
%no-padding {
padding: 0;
margin: 0;
}
html {
@extend %no-padding;
font-family: mis-variables.$default-font;
}
body {
@extend %no-padding;
}

_mis-variables.css：

$default-font: 'Dosis',
Arial,
Helvetica,
sans-serif;

Answer 1

节点sass也给我带来了这个问题。我用sass而不是node-sass修复了它。

只要运行npm install sass就可以了。

Answer 2

您还可以检查Node.js的版本。"节点sass"："7.0.1〃；例如，在更新到node.js v18问题消失后，将无法在node.js v16上工作。要将node.js v16和v18保存在一台机器中(如果在同一台机器的不同项目上使用不同的环境(，可以使用NVM