Vue中解决无需一一引入scss公共样式文件（sass-resources-loader）_vue文件中不引入sass定义的混合怎么使用

sass-resources-loader

在vue中使用sass中的变量、混合等语法封装成的公共样式文件，在app.vue中引入样式文件后，发现不能全局使用，还是需要在组件中一一引入。
利用sass-resources-loader解决。

• 安装 sass-resources-loader

npm i sass-resources-loader
1

• 在vue.config.js配置

module.exports = {
    chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
        item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
            // 公共样式文件地址
            resources: './path/to/vars.scss',

            // 地址也可以是数组
            // resources: ['./path/to/vars.scss', './path/to/mixins.scss', './path/to/functions.scss']
            })
            .end()
        })
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

详细配置参考：https://github.com/shakacode/sass-resources-loader