Vue-cli如何配置可以导入全局样式，并且在head标签中不重复引入？

Question

Vue-cli如何配置可以导入全局样式，并且在head中不重复引入？

使用import 虽然可以解决，但是不符合项目要求？还有什么其他的解决办法吗？
现在使用的是下面这两个方法，虽然可以引入全局样式，但是在head标签中会重复引入！！vue-cli的版本是@vue/cli 4.0.5

• vue.config.js
• 方法一：

...
css: {
    loaderOptions: {
        sass: {
            prependData: `
                //变量
                @import "./src/assets/css/variable.scss";
                //混入
                @import "./src/assets/css/mixin.scss";
                //全局样式重复引入了了
                @import "./src/assets/css/base.scss";
            `
        }
    }
  }
...

• 方法二

...
chainWebpack:config=>{
    const types=['vue']
    types.forEach(type=>{
      config.module.rule('scss').oneOf(type).use('style-resource')
      .loader('style-resources-loader')
      .options({
        patterns:[
        //变量
          path.resolve(__dirname,'./src/assets/css/variable.scss'),
          //混入
          path.resolve(__dirname,'./src/assets/css/mixin.scss'),
          //全局样式重复引入了了
          path.resolve(__dirname,'./src/assets/css/base.scss')
        ]
      })
    })
  },
...

请问有什么解决办法吗？

Answer 1

全局样式只用引入一遍，在 main.js 引入就行了。