vue.config.js配置sass-resources-loader_vue.config.js sass-loader

配置sass-resources-loader

详细查看sass-resources-loader的GitHub网站

• 新建vue.config.js文件
• 开始配置内容

      // scss-resources-loader配置
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: './src/assets/styles/variable.scss'
          // 也可以选择全局变量路径数组, 如果你有多个文件需要成为全局,就可以采用这种方法
          // resources: ['./path/to/vars.scss', './path/to/mixins.scss']
          // 或者你可以将多个scss文件@import到一个main.scss用第一种方法，都是可以的
        })
        .end()
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 如果已经有chainWebpack函数可以继续往后写，注意好写注释。