В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.
Хочется хранить стили в однофайловых компонентах, при этом имея возможность определить глобально часть sass-переменных, кое-какие миксины и функции. Также нужно как-то подключить миксины сетки и ритма, возможно подключать стили от сторонних пакетов.
Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.
Что делаем:
Подключаем в точке входа (main.js) основной стилевой файл:
import '@/styles/main.scss';
import Vue from 'vue';
//...
В нем подключаем всякое-разное-глобальное-базовое:
@import "base/normalize";
@import "base/init";
@import "base/typography";
@import "base/code";
@import "base/links";
@import "base/tables";
@import "base/buttons";
@import "base/control-group";
@import "base/general-form";
@import "parts/transitions";
...
Далаем два файла: env-development.scss и env-production.scss
$NODE_ENV: development;
@import "cfg-vars";
$NODE_ENV: production;
@import "cfg-vars";
Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги
$DEV_MODE: $NODE_ENV == development;
$MAX_INT32: 2147483647;
@import "cfg-vrhythm";
@import "cfg-grid";
@import "../../../node_modules/vrhythm/source/vrhythm";
@import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../mixins";
@import "cfg-z-indexes";
$wt-family-base: "Open Sans", sans-serif;
$wt-family-head: "Roboto Slab", serif;
$font-family-monospace: "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
//==
//== Color palette
//== ======================================= ==//
$palette-light-blue: #3c8dbc; // Primary
$palette-red : #dd4b39; // Danger
$palette-green : #00a65a; // Success
$palette-aqua : #00c0ef; // Info
$palette-yellow : #f39c12; // Warning
...
Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
Идём в vue.config.js и добавляем секцию css:
const NODE_ENV = process.env.NODE_ENV === 'development'
? 'development'
: 'production';
//...
module.exports = {
//...
css: {
extract: NODE_ENV === 'production',
loaderOptions: {
sass: {
data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
},
},
},
};
Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.
Enjoy!
