Vue как подключить sass файл
Обновлено: 06.07.2024
Переменные (variable) SCSS
Благодаря использованию переменных у нас появляется возможность задавать имена для любых используемых данных, таких как цвета, шрифты, числовые значения и другие, а в дальнейшем использовать в любом месте. Задание переменной осуществляется с помощью символа $. Давайте рассмотрим пример.
В папке App создадим файл variables.scss со следующим содержимым.
Теперь изменим файл App.vue, добавив в него немного стилей.
Как вы видите в блоке стилей мы сначала импортировали данные созданного ранее файла с переменными, а потом использовали переменную для установки цвета заголовка. Обратите внимание, что у нас уже включено отслеживание изменений файлов. Это означает, что если во время выполнения приложения, мы изменим какое-либо значение, то нам не придется пересобирать его. Достаточно просто сохранить файл и все изменения отобразятся на экране. В худшем случае придется обновить страницу. Это очень упрощает процесс разработки, потому что не приходится ждать компиляции после каждого изменения.
В итоге получаем следующий результат:
Вложенности SCSS
В HTML существует четкая вложенность элементов. Благодаря этому, структура данных визуально воспринимается значительно легче. В обычном же CSS вложенность реализуется отдельными блоками, что не очень удобно.
Изменим главную страницу добавив стили для списков внутри навигации. Обратите внимание, что благодаря вложенности, мы указываем стили для конкретной иерархии элементов. Благодаря этому, два идентичных списка буду выглядеть по-разному, в зависимости от родительского тега.
Фрагментирование (partial) SCSS
У нас есть возможность создавать именованные фрагменты разметки, сохраненные в отдельные файлы для дальнейшего использования в нескольких местах. Обратите внимание, что имя файла фрагмента обязательно должно начинаться с символа подчеркивания. Это позволяет компилятору пропускать эти файлы и не добавлять их отдельно в результирующий CSS. Для подключения фрагмента используется команда @import.
Создадим фрагмент _h2partial.scss
И теперь добавим этот фрагмент
Импорт (import) SCSS
Импортирование позволяет разделить большой файл на несколько отдельных частей, которые будут более удобными в поддержке и обслуживании. Мы уже использовали импортирование подключив файл с переменными
Обратите внимание, что задавать импортированный файл можно как по полному пути, так и только по его имени.
Миксины (mixin) SCSS
При настройке стилей довольно часто встречаются куски однотипного кода, которые используются в разных компонентах. Например, это использование вендорных префиксов (стили для конкретных браузеров). Для упрощения работы с ними используются так называемые миксины, или примеси. Они позволяют создавать конкретные группы свойств.
Как вы видите, мы успешно добавили рамочку со скругленными углами с помощью миксин.
Наследование (extend) SCSS
Математические операторы (math) SCSS
Использование математических операторов очень упрощает процесс разработки стилей. Мы можем применять базовые операции, такие как сложение (+), вычитание (-), умножение (*), деление (/), процент (%).
Условный оператор (if) SCSS
Условный оператор позволяет динамически изменять стили в зависимости от некоторых условий. Например возможна проверка значения какой-либо переменной и установка стиля только при определенном условии.
От автора: давайте посмотрим, как можно оптимизировать взаимодействие Vue Sass. Если вы работаете над крупномасштабным приложением Vue, скорее всего, вам захочется организовать структуру приложения так, чтобы у вас были некоторые глобально определенные переменные для CSS, которые вы можете использовать в любой части приложения.
Это может быть достигнуто путем написания этого фрагмента кода в каждом компоненте приложения:
Но у кого есть время на это ?! Мы программисты, поэтому давайте сделаем это программно.
Фреймворк VUE JS: быстрый старт
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Для чего?
Возможно, вам интересно, для чего нам делать что-то подобное, особенно если вы только начинаете заниматься веб-разработкой. Глобально это не есть хорошо, не так ли? Зачем нам это нужно? Что такое переменные Sass? Если вы уже все это знаете, вы можете перейти к следующему разделу, посвященному реализации.
Крупные и малые компании, как правило, выполняют редизайн, по крайней мере, каждые 1-2 года. Если ваша база кода большая, она управляется многими людьми, и вам нужно везде изменить высоту строки с 1.1rem на 1.2rem, действительно ли вы должны возвращаться в каждый модуль и изменять это значение? Здесь нужна глобальная переменная. Вы решаете, что может быть на верхнем уровне и что нужно унаследовать для других, меньших частей. Это позволяет избежать спагетти-кода в CSS и сохраняет код чистым.
Я когда-то работал в компании, у которой была гигантская постоянно расширяющаяся база код. За день до крупного релиза сверху спускались приказы, чтобы мы поменяли основной цвет бренда. Поскольку база кода была правильно настроена с определенными переменными, я мог изменить цвет в одном месте и это изменение распространялось на 4000 файлов. Это довольно мощно. Мне также не нужно было пересматривать все подряд, чтобы ввести изменения.
Глобальные определения могут быть само-проверяемыми для дизайнеров: «Подождите, у нас есть еще одна вспомогательная кнопка? Для чего?» Эта практика согласованности UI / UX хорошо себя зарекомендовали.
Если вы работаете с крупномасштабным приложением Vue, есть вероятность, что в какой-то момент вы захотите организовать структуру своего приложения так, чтобы у вас были глобально определенные переменные для CSS, которые вы можно будет использовать в любой части приложения.
Это можно сделать, вставив этот фрагмент кода в каждый компонент вашего приложения:
Но у кого есть на это время ?! Мы программисты, давайте делать это программно.
Зачем это нужно?
Вам может быть интересно, зачем нам нужно делать что-то подобное, особенно если вы только начинаете заниматься веб-разработкой. Ведь использование глобальных переменных всегда плохо, да? Зачем тогда нам это нужно? И что такое переменные Sass? Если вы уже знаете ответы на все это, тогда вы можете перейти к следующему разделу.
Компании, большие и малые, имеют тенденцию пересматривать свои активные проекты как минимум раз в два года. Но если кодовая база проектов огромна и управляется многими людьми, а вам нужно везде изменить line-height с 1.1rem до 1.2rem, вы действительно захотите открывать каждый модуль и изменять это значение? Использование глобальных переменных становится здесь чрезвычайно полезной практикой. Вы сами решаете, что может быть на верхнем уровне, а что должно быть унаследовано от других, более мелких частей. Это позволяет избежать спагетти-кода в CSS и делает ваш код DRY.
Однажды я работал в компании, которая имела гигантскую, растянутую кодовую базу. За день до основного релиза появилась задача поменять наш основной цвет бренда. Поскольку кодовая база была настроена правильно с глобальными переменными, определенными правильно, мне пришлось изменить цвет только в одном месте, и изменения распространились через 4000 файлов. Это довольно круто. Мне также не пришлось работать всю ночь, чтобы успеть вовремя.
Стили всегда связаны с дизайном. Хороший дизайн успешен только когда он целостен. Кодовая база, которая использует общие части единой структуры, будет выглядеть более сплоченной и более профессиональной. Если вам придется переопределять некоторые базовые части вашего приложения в каждом компоненте, все начнет ломаться.
Как это сделать?
Первое, что нам нужно, это начать использовать vue-cli 3. Пример создания проекта:
Когда мы запустим эту команду, нужно удостоверится, что мы используем шаблон с опцией Sass:
Остальные опции остаются на ваше усмотрение, но вам нужно проверить опцию CSS Pre-processors. Если у вас уже есть проект Vue Cli 3, не бойтесь! Вы также можете добавить нужные компоненты:
Далее, давайте создадим новую папку в каталоге src. Назовем эту папку styles. Внутри нее создадим файл _variables.scss. Для тестирования идеи, просто поместим в него одну переменную для проверки:
Теперь давайте создадим файл с именем vue.config.js в корне проекта на том же уровне, что и ваш package.json. В нем мы собираемся определить некоторые параметры конфигурации. Вы можете прочитать больше об этом файле здесь.
Внутри него мы добавим оператор импорта, который мы видели ранее:
Несколько ключевых моментов, на которые следует обратить внимание:
Теперь мы можем перейти к нашему стандартному компоненту App.vue и начать использовать нашу глобальную переменную!
Вот и все! Вы можете увидеть рабочий пример ниже. В нем текст в приложении задается фиолетовым цветом:
Заключение
Вам больше не нужно выполнять повторяющуюся задачу @import одиного и того же файла переменных во все ваше компоненты Vue. Теперь, если вам нужно реорганизовать дизайн вашего приложения, вы можете сделать все это в одном месте, и оно будет распространяться по всему вашему приложению. Что особенно важно для масштабируемых приложений.
Что только не перепробовал, не работает. Текущие файлы выглядят так:
То есть, вью конфиг не подцепил стили.
Этот вариант тоже не сработал
Так же, есть файл с базовыми стилями в другой папке ./src/assets/sass/base.scss , который собирает импорты миксинов и переменных. Хотелось бы его тоже подключить, но ни как.
При попытке импорта напрямую в компонент, через
консоль ругается на первый импорт. Да и в каждом компоненте подключать переменные это бред.
Подскажите, как правильно подключить стили глобально?
Andrej Sharapov, Касательно вашего вопроса просто подключите некий файлик
и в этом файле подключите все нужные миксины и переменные. Они будут доступны во всех компонентах вью.
Сергей delphinpro, у меня таким выступает base.scss. Он импортирует все utils и содержит базовые стили. Пытался по всякому, вылезали ошибки разные, но сейчас все работает. Только остался один вопрос. Помимо этого базового файла, я добавил в конфиг еще два: для сайдбара и шапки. Они не изменны и содержат только стили для указанных модулей. Тоже являются, как бы, глобальными для всего проекта.
Подскажите. Они же ни где не будут дублироваться/наследоваться в другие файлы? И наверное, будет лучше засунуть их в базовый файл, а не разбивать?
Читайте также: