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

Question

问题描述

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

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

vue-cli2

vue-cli3

相关代码

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()
    })
  }
...

如何在vue-cli3中得到vue-cli2中表现结果，就是如何做到不重复引入？

Answer 1

用mini-css-extract-plugin这个插件来实现webpack4.x去重
你可以参考这个网址https://www.npmjs.com/package/mini-css-extract-plugin