同一插件在vue-cli2中和vue-cli3x中表现结果不一样,该如何解决？

Question

同一插件在vue-cli2中和vue-cli3x中表现结果不一样,该如何解决？

淋着

30972173

发布于
2019-12-20

更新于
2019-12-20

问题描述

插件是sass-resources-loader，这个插件在vue-cli2中和vue-cli3x中表现结果不一样,该如何解决？

具体就是vue-cli2中全局导入的样式的scss文件不会在head标签中重复引入，而vue-clil3中全局导入的样式的scss文件会在head标签中重复引入。

vue-cli2

vue-cli3
重复scss.png

相关代码

vue-cli2中的配置

bulid/utils.js的exports.cssLoaders 的返回值处

...
scss: generateLoaders('sass').concat({
      loader:'sass-resources-loader',  
          options:{  
          resources:[
            path.resolve(__dirname,'../src/assets/sw.scss'),
            path.resolve(__dirname,'../src/assets/sw2.scss'),
            path.resolve(__dirname,'../src/assets/base.scss')
          ]
          }
    }),
...

vue-cli3的配置信息

vue.config.js

...
chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Provide path to the file with resources
          //resources: './path/to/resources.scss',
 
          // Or array of paths
          resources: [
            path.resolve(__dirname,'./src/assets/css/variable.scss'),
            path.resolve(__dirname,'./src/assets/css/mixin.scss'),
            path.resolve(__dirname,'./src/assets/css/base.scss')
            ]
        })
        .end()
    })
  }
...