react配置全局scss变量

当在create-react-app中引入scss之后，就可以使用scss的基本功能了。但是，目前无法做到在全局范围内引用scss的变量/extends/函数，目前要实现的就是，就是在入口文件引入后，可以在全局使用。
换句话说，如果你不想配置的话也是可以，只要每个scss文件都@import，那我真的敬你是条汉子！

好了，废话不多说，以下就是配置的步骤：

1.安装sass-resources-loader

npm i -S sass-resources-loader

2.创建公共的scss文件

对于scss，我配置了四个不同的文件，看文件名就知道对应不同的scss功能了，然后在output.scss中统一引入即可。

3.配置config文件

{
    test: /\.scss$/,
    use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'sass-loader'
        },
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    // resolve方法第二个参数为scss配置文件地址，如果有多个，就进行依次添加即可
                    path.resolve(__dirname, './../src/assets/scss/output.scss')
                ]
            }
        }
    ]
}

以上就配置完成了，就可以在所有的scss文件里面使用公共变量了。