应用场景
避免重复导入全局定义的 SASS 变量文件
1、安装 sass-resouces-loader
yarn add sass-resources-loader -D
官方解释: 这个加载器将 @import 您的SASS资源放入每个required SASS模块中。因此,您可以在所有SASS样式中使用共享变量和mixin,而无需在每个文件中手动导入它们。使用CSS模块!
2、React 配置
-
暴露配置文件
yarn run eject
-
在
config
文件夹中找到webpack.config.js
,然后在找到如下代码{ test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'sass-loader' ) },
-
在
getStyleLoaders
函数后面添加如下代码concat({ // 这行的意思是引入加载器 sass-resources-loader loader: 'sass-resources-loader', options: { // 这里是写全局 sass 文件路径 resources: [path.resolve(__dirname,'./../src/assets/css/index.scss')] } })
-
最终代码
{ test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'sass-loader' ).concat({ // 这行的意思是引入加载器 sass-resources-loader loader: 'sass-resources-loader', options: { // 这里是写全局 sass 文件路径 resources: [path.resolve(__dirname, './../src/assets/css/index.scss')] } }), }
-
重启项目