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

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

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

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

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

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

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

Для чего?

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

Крупные и малые компании, как правило, выполняют редизайн, по крайней мере, каждые 1-2 года. Если ваша база кода большая, она управляется многими людьми, и вам нужно везде изменить высоту строки с 1.1rem на 1.2rem, действительно ли вы должны возвращаться в каждый модуль и изменять это значение? Здесь нужна глобальная переменная. Вы решаете, что может быть на верхнем уровне и что нужно унаследовать для других, меньших частей. Это позволяет избежать спагетти-кода в CSS и сохраняет код чистым.

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

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

Глобальные определения могут быть само-проверяемыми для дизайнеров: «Подождите, у нас есть еще одна вспомогательная кнопка? Для чего?» Эта практика согласованности UI / UX хорошо себя зарекомендовали.

Как?

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

npm install -g @vue/cli
# ИЛИ
yarn global add @vue/cli # затем запустите это
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

Другие параметры вы можете установить по своему усмотрению, но нам нужна опция Pre-processor CSS. Если у вас есть проект vue cli 3, вы также можете запустить:

npm i node-sass sass-loader
# ИЛИ
yarn add node-sass sass-loader

Сначала давайте создадим новую папку в каталоге src. Свою я назвал styles. Внутри нее я создал файл _variables.scss, как в популярных проектах, таких как bootstrap. Пока что я просто помещаю в него одну переменную:

$primary: purple;

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

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

Отлично, теперь пара моментов, которые нужно отметить:

Вам нужно будет отключить и перезапустить локальный сервер разработки, чтобы выполнить любые из этих изменений.

Эти @/ в структуре каталогов перед стилями укажут файлу конфигурации выполнять поиск в каталоге src.

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

Компонентам, которые вы импортируете, будет нужен атрибут lang=»scss» (или sass, или less, или какой-либо другой препроцессор, который вы используете) в теге style в компоненте одиночного файла .vue. (См. пример ниже.)

Теперь мы можем войти в наш компонент по умолчанию 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

Источник: https://css-tricks.com/

Редакция: Команда webformyself.