Стили много раз внедряются sass-loader

Я использую 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"
}

person cweave    schedule 31.07.2020    source источник


Ответы (1)


Я нашел то же самое в своих проектах.

Но я предполагаю, что это не ошибка. Количество вставок этих стилей будет равно количеству компонентов, где эти стили используются. Каждая вставка будет иметь свой собственный хэш, например [data-v-df8c9814], который является хешем определенного компонента.

person Denys    schedule 14.09.2020