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

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

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

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Для чего?

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

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

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

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

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

Как?

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

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Автор: Sarah Drasner

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree