react-scripts build错误替换scss文件中var()语法问题求助

问题根因 #

该问题由 sass-loader@11.x 与 create-react-app@4.0.3 的版本不兼容导致：

• sass-loader 11+ 版本默认开启了Sass内置的CSS自定义属性解析逻辑，会尝试将var()内引用的CSS变量自动替换为预先定义的固定值，而非保留原生var()语法
• 你当前使用的node-sass@6.0.1底层依赖的libsass版本也配合这个特性做了支持，所以会出现var(--white)被错误编译为var(#fff)的情况

可行解决方案 #

方案1：降级依赖到CRA4.0.3官方适配版本（最稳妥，无需修改配置） #

CRA4.0.3官方兼容的sass相关依赖版本为sass-loader@10.x、node-sass@5.x，直接卸载现有版本安装兼容版本即可：

npm uninstall node-sass sass-loader
npm install node-sass@5.0.0 sass-loader@10.1.1 --save-dev

方案2：修改sass-loader配置（适用于已经eject了CRA配置的项目） #

打开项目下config/webpack.config.js文件，找到sass-loader的配置项，添加关闭CSS变量自动解析的参数：

{
  loader: require.resolve('sass-loader'),
  options: {
    sassOptions: {
      css: false // 关闭Sass对原生CSS语法的强制解析替换
    }
  }
}

方案3：通过craco覆盖配置（适用于未eject CRA配置的项目） #

如果你不想eject CRA的默认配置，可以通过craco工具覆盖sass-loader配置：

1. 首先安装craco：

npm install @craco/craco --save-dev

2. 项目根目录新建craco.config.js，写入以下配置：

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        sassOptions: {
          css: false
        }
      }
    }
  }
}

3. 修改package.json中的scripts命令，将react-scripts替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

所有方案修改完成后，重新执行npm run build即可验证编译结果是否符合预期。

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