Глобальный стиль против локального стиля в VueJS

Question

Я строю проект с .vue файлами, которые позволяют записывать CSS (SASS), JS и HTML в один файл.

Я решил написать некоторые глобальные компонентыв SASS для файла assets/styles/app.scss, который будет загружать мою сетку, переменные и миксины.

Кроме того, я хочу написать некоторые локальные правила SASS в зависимости от компонента / страницы, на которой я работаю,кажется довольно логичным хотеть и того, и другого в проекте ...

Локально это выглядит так:

<template>
</template>

<script>
</script>

<style lang="scss">
  @import "assets/styles/app";

  .my-style {
    color: $my-variable;
  }
</style>

Это на самом деле работает, например, я могу использовать $my-variable в своем локальном .vue файл или любой миксин, который я хочу.Проблема в том, что проект VueJS будет расти, и компоненты будут объединяться для отображения страницы.

Я заметил, что глобальный стиль был загружен для каждого компонента, и то же правило присутствует в 5x, 10x, когда я открываю свой Chrome.инструмент разработчика.Это все еще очень маленький проект;все мои стили в основном дублируются и загружаются браузером каждый раз, когда я добавляю компонент на одну и ту же страницу.

Как избежать многократной загрузки глобальных стилей, и при этом использовать глобальный код SASS в каждомкомпоненты?

Раньше я никогда не работал с локальными, смешанными с глобальными стилями, я предпочел просто полностью абстрагировать стили в отдельную структуру, но так удобнее кодировать все локальное в одном месте.

Что я здесь не так делаю?

Подробно: я нахожусь на NuxtJS, но считаю, что эта проблема больше связана сVueJS в целом.

Answer 1

По сути, каждый раз, когда вы делаете @import в своих компонентах, он добавляет еще одну копию к основному файлу CSS, который генерирует Webpack.

Если у вас правильно настроен загрузчик Webpack SCSS (что, я полагаю, вы делаетепоскольку он компилируется), вы сможете импортировать файл SCSS один раз в app.vue, и компилятор SCSS найдет его при добавлении всех других CSS.

Например, получая глобальные шрифты и миксины:

<style lang="scss">
  @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
  @import "@/scss/mixins.scss";
</style>

Затем создайте свой CSS для каждого компонента в разделе <style> компонента.Просто убедитесь, что вы добавили lang="scss", чтобы все это компилировалось.

Возможно, вы также захотите заглянуть в scss-resource-loader для Webpack.Я думаю, что это в новейших сборках CLI, не уверен насчет Nuxt.