Vue中使用sass-resources-loader插件全局导入scss时，为什么解析出来的css会在head中重复引用？

Question

问题描述

Vue中使用sass-resources-loader这个插件全局导入scss时，为什么解析出来的css会在head中重复引用？有什么方法可以解决吗？

用的@vue/cli 4.0.5这个版本的脚手架

vue.config.js的配置信息

const path=require('path')
module.exports={
  publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
  assetsDir:'assets',
  indexPath:'myIndex.html',
  filenameHashing:false,
  productionSourceMap: false,
  chainWebpack:config=>{
    const types=['vue']
    //主要就是这配置的全局引用的scss文件
    types.forEach(type=>{
      config.module.rule('scss').oneOf(type).use('style-resource'
      .loader('style-resources-loader')
      .options({
        patterns:[cdd
          //这个只是变量，就是不能直接解析为css的
          path.resolve(__dirname,'./src/assets/css/variable.scss'),
          //这个只是混合，就是不能直接解析为css的~~~~
          path.resolve(__dirname,'./src/assets/css/mixin.scss'),
          //这个scss文件就重复引入了
          path.resolve(__dirname,'./src/assets/css/base.scss')
        ]
      })
    })
  }
}

全局引入的scss文件和Test.vue

1.variable.scss

@charset 'utf-8';
$bg:skyblue;
$w:100px;
$h:100px;
$tsize:50px;
$w2:200px;
$h2:200px;

2.mixin.scss

@charset 'utf-8';
@mixin wh($w,$h) {
  width: $w;
  height: $h;
  border: 1px solid red;
}

3.base.scss,就是这个scss文件被重复在head中引入了

@charset 'utf-8';
.test{
  border: 5px solid pink;
  height: 100px;
  width: 100px;
}

4.Test.vue

<template>
  <div>
    <div class="test">
      test
    </div>
    <div class="box2">
      ssss
    </div>
  </div>
</template>
<style lang="scss">
  .test{
    font-size:$tsize;
    background: $bg;
  }
  .box2{
    @include wh($w2,$h2) 
  }
</style>

结果

3次都包含这个base.scss解析出来的样式

那位大佬知道为什么解析出来的css会在head中重复引用？有什么方法可以解决吗？

Answer 1

被全局引用的scss文件,不要放具体的css代码.

应该只放scss变量,函数,混合等,不会产生污染的东西.

如果是希望全局引用的css样式文件,在入口js引一次即可.