create-react-app 在不暴露配置情况下 配置 scss/sass 全局变量

create-react-app 在不暴露配置情况下 配置 scss/sass 全局变量

create-react-app 利用 react-app-rewired 在不暴露配置，不破坏环境的 情况下 配置 scss/sass 全局变量。

由于项目中需要定义全局主题的样式变量，也就是利用sass-resources-loader这个loader将scss变量打包到每个文件中，但是由于 create-react-app(以下简称cra)暴露配置会破坏 "guarantees" 的优点。

所以当时就打算用上 react-app-rewired 这个插件，但是用上之后直接配置loader 还需要单独根据当前环境配置(如生产环境的css需要单独打包成，而不是放在style中)。

所以又找的一个 customize-cra 的插件，看他的文档的话有一个 addWebpackModuleRule 的函数但是用了之后好像还是会对环境造成问题，所以放弃了这个方法。

之后看到了一个 adjustStyleLoaders的函数 可以查看所有loader，我灵机一动 可不可以直接把sass-resources-loader直接添加到原来的loader呢，完美。

贴以下我的代码

config-overrides.js

module.exports = override(
  // ...其他配置...
  adjustStyleLoaders(rule => {
    if (rule.test.toString().includes('scss')) {
      rule.use.push({
        loader: require.resolve('sass-resources-loader'),
        options: {
          resources: './src/assets/css/theme.scss'
        }
      });
    }
  })
  // ...其他配置...
)