React & SCSS: SassError: 未定义的变量答案

【问题标题】：React & SCSS: SassError: Undefined variableReact & SCSS: SassError: 未定义的变量
【发布时间】：2021-08-10 10:24:10
【问题描述】：

我正在开发一个 React 应用程序，我有一个 SCSS 文件，我在其中定义了一些变量：

variables.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。 css) SassError：未定义的变量：“$source-sans-font”。在 /Users/olcayertas/10n/src/components/PortfolioSummary/PortfolioSummary.module.scss 的第 4 行

字体系列：$source-sans-font;

---------------^

我正在使用 WebStorm，IDE 不会对变量给出任何错误，如果我命令+单击变量，它可以转到定义。

环境：节点：v14.17.0 下午：6.14.13 操作系统：Mac OS X Big Sur

【问题讨论】：

您是否尝试了@import 规则而不是@use？我不建议您切换到@import 规则，只是需要检查一下:) 确保您使用dart-sass，因为node-sass 不适用于@use 规则。
确保在你的项目中安装了node-sass，并使用@importinstant @use
但是 SCSS 文档说他们将放弃使用 at-import 并建议使用 at-use。 sass-lang.com/documentation/at-rules/import
我已经安装了 node-sass。
医学博士。 Abu Sayed 不好的建议 - The Sass team discourages the continued use of the @import rule.

标签： css reactjs sass node-sass

【解决方案1】：

如果你安装了node-sass，我建议你使用下面这个sn-p

@import "../../assets/scss/variables";

.headerText {
  font-family: $source-sans-font;
  font-weight: 600;
  font-size: 28px;
  color: #2d2d2d;
  opacity: 1;
  padding-top: 9px;
}

【讨论】：