Как импортировать Sass файл в каждый компонент Vue приложения

Если вы работаете с крупномасштабным приложением Vue, есть вероятность, что в какой-то момент вы захотите организовать структуру своего приложения так, чтобы у вас были глобально определенные переменные для CSS, которые вы можно будет использовать в любой части приложения.

Это можно сделать, вставив этот фрагмент кода в каждый компонент вашего приложения:

<style lang="scss">
  @import "./styles/_variables.scss";
</style>

Но у кого есть на это время ?! Мы программисты, давайте делать это программно.

Зачем это нужно?

Вам может быть интересно, зачем нам нужно делать что-то подобное, особенно если вы только начинаете заниматься веб-разработкой. Ведь использование глобальных переменных всегда плохо, да? Зачем тогда нам это нужно? И что такое переменные Sass? Если вы уже знаете ответы на все это, тогда вы можете перейти к следующему разделу.

Компании, большие и малые, имеют тенденцию пересматривать свои активные проекты как минимум раз в два года. Но если кодовая база проектов огромна и управляется многими людьми, а вам нужно везде изменить line-height с 1.1rem до 1.2rem, вы действительно захотите открывать каждый модуль и изменять это значение? Использование глобальных переменных становится здесь чрезвычайно полезной практикой. Вы сами решаете, что может быть на верхнем уровне, а что должно быть унаследовано от других, более мелких частей. Это позволяет избежать спагетти-кода в CSS и делает ваш код DRY.

Однажды я работал в компании, которая имела гигантскую, растянутую кодовую базу. За день до основного релиза появилась задача поменять наш основной цвет бренда. Поскольку кодовая база была настроена правильно с глобальными переменными, определенными правильно, мне пришлось изменить цвет только в одном месте, и изменения распространились через 4000 файлов. Это довольно круто. Мне также не пришлось работать всю ночь, чтобы успеть вовремя.

Стили всегда связаны с дизайном. Хороший дизайн успешен только когда он целостен. Кодовая база, которая использует общие части единой структуры, будет выглядеть более сплоченной и более профессиональной. Если вам придется переопределять некоторые базовые части вашего приложения в каждом компоненте, все начнет ломаться.

Как это сделать?

Первое, что нам нужно, это начать использовать vue-cli 3. Пример создания проекта:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

# then run this to scaffold the project
vue create scss-loader-example

Когда мы запустим эту команду, нужно удостоверится, что мы используем шаблон с опцией Sass:

? Please pick a preset: Manually select features
? Check the features needed for your project:
  ◉ Babel
  ◯ TypeScript
  ◯ Progressive Web App (PWA) Support
  ◯ Router
  ◉ Vuex
❯ ◉ CSS Pre-processors
  ◉ Linter / Formatter
  ◯ Unit Testing
  ◯ E2E Testing

Остальные опции остаются на ваше усмотрение, но вам нужно проверить опцию CSS Pre-processors. Если у вас уже есть проект Vue Cli 3, не бойтесь! Вы также можете добавить нужные компоненты:

npm i node-sass sass-loader
# OR
yarn add node-sass sass-loader

Далее, давайте создадим новую папку в каталоге src. Назовем эту папку styles. Внутри нее создадим файл _variables.scss. Для тестирования идеи, просто поместим в него одну переменную для проверки:

$primary: purple;

Теперь давайте создадим файл с именем vue.config.js в корне проекта на том же уровне, что и ваш package.json. В нем мы собираемся определить некоторые параметры конфигурации. Вы можете прочитать больше об этом файле здесь.

Внутри него мы добавим оператор импорта, который мы видели ранее:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variables.scss";`
      }
    }
  }
};

Несколько ключевых моментов, на которые следует обратить внимание:

• Вам нужно будет закрыть и перезапустить свой локальный сервер разработки, чтобы изменения вступили в силу.
• Символ @/ в структуре каталогов перед styles скажет этому файлу конфигурации искать в каталоге src.
• Вам не нужно обязательно использовать подчеркивание в имени файла, чтобы это работало. Это соглашение о присвоении имен Sass.
• Компонентам, в которые вы импортируете, потребуется атрибут lang = “scss” (или sass, или less, или какой-либо препроцессор, который вы используете) в теге style. (См ниже)

Теперь мы можем перейти к нашему стандартному компоненту App.vue и начать использовать нашу глобальную переменную!

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  //this is where we use the variable
  color: $primary;
  margin-top: 60px;
}
</style> 

Вот и все! Вы можете увидеть рабочий пример ниже. В нем текст в приложении задается фиолетовым цветом:

Заключение

Вам больше не нужно выполнять повторяющуюся задачу @import одиного и того же файла переменных во все ваше компоненты Vue. Теперь, если вам нужно реорганизовать дизайн вашего приложения, вы можете сделать все это в одном месте, и оно будет распространяться по всему вашему приложению. Что особенно важно для масштабируемых приложений.

Оригинальная статья: Sarah Drasner How to Import a Sass File into Every Vue Component in an App