Как предотвратить перезапись глобального css Vue несколько раз
В моем проекте vue у меня есть глобально определенный css, например, файл сброса и т. д. Я загружаю этот css, используя следующее в моем vue.config:
css: {
loaderOptions: {
sass: {
data: `
@import "@/assets/styles/styles.scss";
`,
},
},
},
Когда я смотрю в стилях браузера, кажется, что css перезаписывает себя более 50 раз.
Мне интересно, что вызывает такое поведение?
Ответы 2
В ваш vue.config.js поместите только переменные, примеси, функции.
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/assets/sass/_colors.scss";
@import "@/assets/sass/_variables.scss";
@import "@/assets/sass/_mixins.scss";
@import "@/assets/sass/_functions.scss";
`
}
}
}
Теперь в styles.scss поместите свои стили, например:
@import "reset";
@import "base";
@import "fonts";
@import "z-index";
@import "transitions";
@import "util";
В вашем main.js импортируйте styles.scss
import '@/assets/styles/styles.scss'
Для меня это приводит к тому, что селекторы классов в глобальном scss перестают работать.
Это решает проблему, но, как описал Деджи, мы теряем возможность расширять классы, которые были описаны в styles.css, и я хотел бы сохранить эту функциональность!
Ваш глобальный файл стилей прикрепляется перед блоком стилей каждого компонента, который импортирует ваш router.js.
В результате существует множество определений одного и того же класса css, которые выглядят так, как будто их переопределяют.
Один простой способ уменьшить беспорядок — включить ленивую загрузку компонентов, как описано в документации здесь -> https://router.vuejs.org/guide/advanced/lazy-loading.html.
Чтобы реализовать это, вам нужно будет изменить только операторы импорта в router.js и абсолютно ничего не нужно будет менять где-либо еще.
Если бы я привел глупый пример:
import Foo from "@/src/views/Foo.vue";
станет
const Foo = () => import('@/src/views/Foo.vue');
Лучший ответ. Решил мою проблему. Спасибо.