vue项目中，全局引用sass

背景：sass的mixin与全局变量文件需在多处引入十分麻烦，可以通过sass-resources-loader达到全局注入，终身受益的目的。

scss目录

安装

npm i sass-resources-loader --save -dev

配置

在build/utils.js文件的exports.cssLoaders函数内添加如下代码：

exports.cssLoaders = function (options) {
    // ...

    function generateSassResourceLoader () {
        var loaders = [
            cssLoader,
            postcssLoader, px2remLoader, // 若需要则加上这一行，不用就不加
            'sass-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        path.resolve(__dirname, '../src/common/scss/variable.scss'),
                        path.resolve(__dirname, '../src/common/scss/mixins.scss')
                    ]
                }
            }
        ]
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }

    // ...

    return {
        // ...
        sass: generateSassResourceLoader(), // 替换原来的，下同
        scss: generateSassResourceLoader(),
        // ...
    }
}

注意事项

1.千万不要全局注入app.scss这种全局样式文件，它会重复编译多次
2.如果需要引用lib-flexible，则需要在loader里添加px2remLoader，否则px不会自动转rem