我正在开发一个React应用程序，我有一个SCSS文件，我在其中定义了一些变量：
变量。scss：
$source-sans-font: Source Sans Pro, serif;
$sidebar-bg-color: #916fdd;
$sidebar-width: 250px;
$icon-bg-color: transparent;
$icon-size: 24px;
$highlight-color: #ffffff;
$breakpoint-lg: 1100px;
在我的React组件中，我有一个使用以下变量的另一个SCSS文件：
@use "../../assets/scss/variables";
.headerText {
font-family: $source-sans-font;
font-weight: 600;
font-size: 28px;
color: #2d2d2d;
opacity: 1;
padding-top: 9px;
}
当我尝试运行应用程序时，我会收到以下错误：
未能编译。
./src/components/PortfolioSummary/PortfolioSummary.module.scss
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/PortfolioSummary/PortfolioSummary.module.scss)
SassError: Undefined variable: "$source-sans-font".
on line 4 of /Users/olcayertas/10n/src/components/PortfolioSummary/PortfolioSummary.module.scss
>> font-family: $source-sans-font;
------------------^
我使用的是WebStorm，IDE不会为变量提供任何错误，如果我按下命令+点击变量，它可以转到定义。
环境：
节点：v14.17.0
NPM:6.14.13
OS:Mac OS X Big Sur
对于上述问题，您可以调用等变量
@use "../../assets/scss/variables";
.headerText {
font-family: variables.$source-sans-font;
font-weight: 600;
font-size: 28px;
color: #2d2d2d;
opacity: 1;
padding-top: 9px;
}
或者在导入时提供别名
@use "../../assets/scss/variables" as variable;
.headerText {
font-family: variable.$source-sans-font;
font-weight: 600;
font-size: 28px;
color: #2d2d2d;
opacity: 1;
padding-top: 9px;
}
其他
@use "../../assets/scss/variables" as *;
.headerText {
font-family: $source-sans-font;
font-weight: 600;
font-size: 28px;
color: #2d2d2d;
opacity: 1;
padding-top: 9px;
}```
如果您安装了节点sass，我建议您使用下面的这个片段
@import "../../assets/scss/variables";
.headerText {
font-family: $source-sans-font;
font-weight: 600;
font-size: 28px;
color: #2d2d2d;
opacity: 1;
padding-top: 9px;
}
将SCSS文件导入主SCSS文件时，请确保使用@导入"；在所有文件上。请勿使用@import URL(文件路径(；。它们不一样。我希望这对你有帮助。这就是我解决问题的方法。