场景
当我们在scss样式文件中想使用其他已经声明好的scss变量文件,通常会这么做:
//index.scss
@import "minix.scss";
body {
color: $theme-color;
}
随着项目越来越大,每个样式文件都需要用到全局定义好的变量,这时就变得非常的笨重,弊端就暴露出来了
那么我们如何在react项目中解决这个问题呢
安装
安装sass-resouces-loader
npm i sass-resources-loader -D
这个加载器将@import
您的SASS资源放入每个required
SASS模块中。因此,您可以在所有SASS样式中使用共享变量和mixin,而无需在每个文件中手动导入它们。使用CSS模块!
使用
module: {
rules: [
...
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')
],
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-resources-loader',
options: {
resources: ['./skin/mixin.scss', './skin/base.scss']
}
}
],
exclude: path.resolve(__dirname, 'node_modules')
}
]
},