React项目使用node-sass报Undefined variable但编译产物正常

问题诱因 #

• 存在两套并行的Sass编译逻辑冲突：你自定义的全局index.scss编译流程会先导入变量再引入组件样式，所以编译输出的index.css内容完全正确；但React项目（尤其是create-react-app初始化的项目）默认开启了组件级样式编译规则，会自动检测项目内的.scss文件单独编译，单独编译Button.scss时没有前置引入变量文件，就会抛出变量未定义的错误，该错误会阻断React的渲染流程，因此哪怕全局index.css内容正确，页面也无法正常加载。
• 未在index.scss中导入的组件样式也会加载，是因为你的组件JSX/TSX文件中直接引入了对应组件的.scss文件，比如Button.jsx中存在import './Button.scss'代码，React的默认编译逻辑会直接把这部分样式打包进产物，和你全局的导入逻辑完全独立。
• 此前运行正常现在突然报错，大概率是依赖版本变更导致：要么是sass-loader/node-sass版本升级后默认开启了单文件编译校验，要么是package.json的依赖版本没有锁死，重装依赖时自动升级了规则不兼容的版本。如果代码中写的变量是$red_hero但报错提示$red-hero，需要额外检查是否有配置自动将变量名下划线转换为中横线。

解决方案 #

方案1：保留全局编译逻辑，关闭组件级单独编译 #

• 删除所有组件JSX/TSX中对.scss文件的引入代码，所有组件样式统一仅在index.scss中导入，避免React默认识别到组件样式触发单独编译。
• 调整组件样式文件命名规则：Sass默认会将下划线开头的文件识别为分块文件，不会单独编译，你可以把Button.scss重命名为_Button.scss，导入时可以省略下划线，写法保持@import "components/Button/Button"即可。
• 锁死依赖版本：将node-sass、sass-loader的版本固定到此前正常运行的版本，删除node_modules和package-lock.json/yarn.lock后重新安装依赖。

方案2：放弃自定义全局编译逻辑，使用原生Sass全局变量注入 #

• 删掉你自定义的index.scss编译配置，直接在React的默认编译规则中注入全局变量。如果是CRA项目可以安装craco，在craco.config.js中配置sass-loader的additionalData参数，自动给所有.scss文件头部注入变量文件：

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        additionalData: `@import "src/styles/variables.scss";`
      }
    }
  }
}

• 组件样式直接在组件JSX中引入即可，不需要统一在全局导入，变量会自动注入，不会出现未定义的问题。

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