create-react-app 在不暴露配置情况下 配置 scss/sass 全局变量
create-react-app 在不暴露配置情况下 配置 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'
}
});
}
})
// ...其他配置...
)