webpack4导入全局sass文件

场景

当我们在scss样式文件中想使用其他已经声明好的scss变量文件，通常会这么做：

//index.scss
@import "minix.scss";

body {
  color: $theme-color;
}

随着项目越来越大，每个样式文件都需要用到全局定义好的变量，这时就变得非常的笨重，弊端就暴露出来了

那么我们如何在react项目中解决这个问题呢

安装

安装sass-resouces-loader
npm i sass-resources-loader -D

这个加载器将@import您的SASS资源放入每个requiredSASS模块中。因此，您可以在所有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')
        }
    ]
},