React项目从JS迁移到TS时SCSS变量未声明先使用问题求助

问题场景 #

将React JavaScript项目迁移至TypeScript后，其余代码正常，但SCSS文件出现变量未定义报错。此前JS环境中SCSS变量可正常使用，迁移后报错信息如下：

ERROR in ./src/ourApp/scss/config/interactive/_variables.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/ourApp/scss/config/interactive/_variables.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
20 │ $vertical-menu-border: $white;
   │                        ^^^^^^
   ╵
  src\ourApp\scss\config\interactive\_variables.scss 20:24  root stylesheet

经排查，报错原因是$white变量在被$vertical-menu-border引用前未声明，调整变量顺序可解决，但因涉及大量文件，希望了解问题根源及是否可禁用此类错误检查。

问题根源：JS与TS环境差异原因 #

1. 依赖版本或配置变更：迁移TypeScript时，可能同步升级了webpack、sass-loader、dart-sass/node-sass等依赖。新版本的Sass工具链对变量引用顺序的检查更严格，旧版本可能存在兼容逻辑，允许后续定义的变量被提前引用（不符合Sass规范，但未触发报错）。
2. 全局样式导入逻辑变化：JS项目中可能通过入口文件（如index.js）提前导入了全局变量文件，或通过sass-loader的全局注入配置确保变量先加载；而TS项目的入口文件（如index.tsx）导入顺序改变，或全局注入配置未同步，导致$white所在文件未在使用它的变量文件前加载。
3. 项目模板配置差异：官方create-react-app的JS模板与TS模板默认的CSS/Sass编译配置可能存在差异，TS模板启用了更严格的Sass语法检查规则。

解决方案：是否可禁用错误检查？如何操作？ #

Sass本身不支持直接禁用“未定义变量”的错误检查，因为这属于语法级错误，强行禁用会导致样式逻辑混乱。更合理的处理方式如下：

1. 规范变量导入顺序（推荐） #

将所有全局变量集中到一个统一的文件（如_global-variables.scss），然后在所有需要使用变量的SCSS文件顶部导入该文件，确保变量在使用前已声明。

2. 全局自动注入变量 #

通过sass-loader的additionalData选项，在webpack配置中自动为每个SCSS文件注入全局变量文件，无需手动在每个文件中导入：

// webpack.config.js 或 craco.config.js（create-react-app项目用craco修改配置）
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // 替换为你的全局变量文件路径
              additionalData: `@import "~@/scss/config/global/_variables.scss";`,
            },
          },
        ],
      },
    ],
  },
};

注：路径中的~需根据项目webpack配置调整，通常指向src目录。

3. 使用!default声明变量 #

如果变量存在后续覆盖的场景，可以在声明变量时添加!default标记，即使变量在后面定义也不会报错（需注意变量优先级）：

// 在使用$white的文件顶部添加
$white: #ffffff !default;
$vertical-menu-border: $white;

内容的提问来源于stack exchange，提问作者Feyton