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