样式被sass-loader多次注入

Question

我正在使用Vue和sass-loader，并且有一个相同样式的问题被多次注入到页面中。我正在使用SCSS，并尝试将所有部分导入到一个SCSS样式表中，然后将该样式表导入到我的main.js文件中，让Webpack来处理它，但它仍然在做同样的事情。我尝试将每个部分单独导入到我的Vue配置文件中，但没有任何变化。

​

(所有这些样式标签都会重复)

这是我当前的配置：

vue.config.js

css: {
    loaderOptions: {
        scss: {
            additionalData: `
                @import "@/styles/_variables.scss";
                @import "@/styles/_buttons.scss";
                @import "@/styles/_default.scss";
                @import "@/styles/_grid.scss";
                @import "@/styles/_mixins.scss";
                @import "@/styles/_utilities.scss";
            `
        }
    }
},

以前的vue.config.js配置：

css: {
    loaderOptions: {
        sass: {
            prependData: '@import "~@/styles/styles.sass"'
        },
        scss: {
            prependData: '@import "~@/styles/styles.scss";'
        }
    }
},

以前的配置：

styles.scss

@import '_variables';
@import '_default';
@import '_grid';
@import '_mixins';
@import '_buttons';
@import '_utilities';

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './styles/styles.scss';


new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

package.json

"dependencies": {
    "core-js": "^3.6.5",
    "npm": "^6.14.7",
    "vue": "^2.6.10",
    "vue-router": "^3.3.4"
},
"devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.6",
    "@vue/cli-plugin-eslint": "^4.4.6",
    "@vue/cli-plugin-router": "^4.4.6",
    "@vue/cli-plugin-unit-jest": "^4.4.6",
    "@vue/cli-service": "^4.4.6",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.1.0",
    "eslint": "^5.15.3",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.14.1",
    "prettier": "^2.0.5",
    "sass-loader": "^9.0.2",
    "vue-loader": "^15.9.3",
    "vue-markdown-loader": "^2.4.1",
    "vue-template-compiler": "^2.6.11"
}

Answer 1

我在我的项目中发现了同样的事情。

但我猜那不是虫子。这些样式的插入数量将等于使用这些样式的组件的数量。每个插入都有自己的散列，如data-v-df8c9814，这是特定组件的散列。