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'
}
});
}
})
// ...其他配置...
)