Nuxt Style Resources

Оглавление

• Установка
  • SASS
  • LESS
  • Stylus
• Установка Nuxt Style Resources
• Подключение
• Подготовка перед работой с Nuxt Style Resources
  • Миксины
    • _media.scss
    • _font-face.scss
  • Шрифты
  • Переменные
  • Файл глобальных стилей
• Последние шаги подключения
• Проверим что все работает
• Итог

Nuxt Style Resources — модуль для Nuxt.js, позволяет работать с переменными, миксинами и функциями во всем проекте. Поддерживает SASS, LESS и Stylus синтаксис.

#

Установка

Для начала необходимо установить две зависимости. Первая называется node-sass / less / stylus в зависимости от того, какой пре-процессор вы используете. Вторая называется sass-loader / less-loader / stylus-loader, опять же, в зависимости от того, на каком пре-процессоре вы пишите:

#

SASS:

npm i sass-loader node-sass --save-dev

#

LESS:

npm i less-loader less --save-dev

#

Stylus:

npm i stylus-loader stylus --save-dev

#

Установка Nuxt Style Resources

Далее нужно установить сам модуль:

npm i @nuxtjs/style-resources --save-dev

Теперь в файле package.json в devDependencies у нас добавились три зависимости:

"devDependencies": {
  "@nuxtjs/style-resources": "^1.0.0",
  "node-sass": "^4.14.1",
  "sass-loader": "^10.0.1"
}

#

Подключение

Далее, в файле nuxt.config.js необходимо подключить новый модуль:

modules: [
    '@nuxtjs/style-resources',
],

В том же файле нужно определить новую опцию styleResources:

styleResources: {
    sass: [],
    scss: [],
    less: [],
    stylus: []
},

#

Подготовка перед работой с Nuxt Style Resources

Далее мы можем начать делать заготовку для применения модуля. В корне проекта я создам директорию theme, в ней я буду хранить глобальные стили сайта, которые мне могут понадобиться на любой странице. А так же, внутри theme я создам еще три директории:

1. _mixins — Тут буду хранить миксины.
2. _vars — В этой директории я буду размещать переменные стилей.
3. _fonts — В этой директории будут подключаться шрифты через миксин.

#

Миксины

Еще со времен своих Gulp сборок, я использую собственные миксины. Из моей коллекции я использую два в каждом проекте, это миксин для media-запросов и для простого и быстрого подключения шрифтов.

#

_media.scss

Создаем файл _media.scss внутри директории _mixins со следующим содержимым:

$lg-desktop-width: 1200px;
$md-desktop-width: 992px;
$sm-tablets-width: 768px;
$sm-mobile-width: 480px;
$extra-sm-mobile-width: 320px;

/*==========  Desktop First  ==========*/

/* Large devices | 1200px or less */
@mixin lg-desktop {
  @media only screen and (max-width: #{$lg-desktop-width}) {
    @content
  }
}

/* Medium devices | 992px or less */
@mixin md-desktop {
  @media only screen and (max-width: #{$md-desktop-width}) {
    @content
  }
}

/* Small tablet devices | 768px or less */
@mixin sm-tablets {
  @media only screen and (max-width: #{$sm-tablets-width}) {
    @content
  }
}

/* Small mobile devices | 480px or less */
@mixin sm-mobile {
  @media only screen and (max-width: #{$sm-mobile-width}) {
    @content
  }
}

/* Extra small mobile devices | 320px or less */
@mixin esm-mobile {
  @media only screen and (max-width: #{$extra-sm-mobile-width}) {
    @content
  }
}

#

_font-face.scss

И еще один файл создаем там же — _font-face.scss.

@mixin font($f-name, $f-style, $f-weight, $f-url) {
  @font-face {
    font-family: $f-name;
    font-style: $f-style;
    font-weight: $f-weight;
    font-display: swap;
    src: url($f-url) format('woff2');
  }
}

Миксины готовы.

#

Шрифты

Внутри директории _fonts создаем файл _fonts.scss — пока что пустой. Теперь, имея миксин для импорта шрифтов, можно найти нужный нам шрифт и подключить его. Мне понравился шрифт Lato — он бесплатный, я скачал его и залил в директорию static — у меня получилось вот так:

Теперь подключим эти шрифты через миксин, в файле _fonts.scss:

@import "../_mixins/font-face";

// font-family: 'Lato-Regular', sans-serif
@include font('Lato-Regular', normal, 400, '/fonts/Lato/LatoRegular/Lato-Regular.woff2');

// font-family: 'Lato-Bold', sans-serif
@include font('Lato-Bold', normal, 400, '/fonts/Lato/LatoBold/Lato-Bold.woff2');

#

Переменные

Внутри директории _vars создаем файл _vars.scss. В нем мы разместим небольшой список переменных для нашего приложения и заодно подключим шрифт Lato:

// Fonts vars
$default-font: 'Lato-Regular', sans-serif;
$background: #f2f2f2;
$font-color: #000000;
$font-size: 16px;

// Link color
$link: #000000;

// Link hover color
$link-hover: #2d56d0;

#

Файл глобальных стилей

Осталось совсем чуть-чуть. В корне директории theme я создаю файл index.scss со следующим содержимым:

@import "_vars/vars";
@import "_fonts/fonts";

/*  ----------------------------------------------------------------
/*  >>> TABLE OF CONTENTS:
/*  ----------------------------------------------------------------
/*  1. Body
/*  2. Selection
/*  3. Buttons
/*  --------------------------------------------------------------*/

/*  ----------------------------------------------------------------
/*  1. Body
/*  --------------------------------------------------------------*/
body {
    position: relative;
    overflow-x: hidden;
    min-width: 320px;
    font-family: $default-font;
    font-size: $font-size;
    color: $font-color;
    background: $background;
}

/*  --------------------------------------------------------------*/
/*  2. Selection
/*  --------------------------------------------------------------*/
*::selection {
    background: $link;
    color: $font-color;

}

/*  --------------------------------------------------------------*/
/*  3. Buttons
/*  --------------------------------------------------------------*/
button {
    cursor: pointer;
}

button:focus,
button:active {
    outline: none;
}

В самом начале я импортирую шрифты и переменные, чтобы открыть их видимость для глобального файла стилей.

#

Последние шаги подключения

Помните мы создавали опцию styleResources? Теперь в ней нам нужно подключить глобальные файлы темы. Но делать это нужно крайне осторожно, т. к. подключив файл со стилями — он будет добавлен к каждому компоненту, и в случае большого количества глобальных стилей, наше приложение станет очень большим и будут проблемы с оптимизацией. Так же, не стоит увлекаться созданием большого количества миксинов. Я стараюсь указывать только самые необходимые и часто используемые миксины и стили, которых, например, нет во frontend фреймворке. Я считаю что лучше лишний раз продублировать стили на несколько компонентов вручную или через layout — чем цеплять их абсолютно ко всему проекту.

В файле nuxt.config.js в опции css зарегистрируем глобальный файл стилей (помните, чем он меньше — тем лучше):

css: [
    '@/theme/index.scss',
],

А в опции styleResources зарегистрируем миксины (да, с ними тоже лучше не перебарщивать):

styleResources: {
    scss: [
        '@/theme/_mixins/*.scss',
        '@/theme/_vars/*.scss',
    ]
},

#

Проверим что все работает

Осталось проверить что мы все сделали корректно. Для этого откроем файл pages/index.vue и изменим немного содержимое:

<template>
    <div class="main-block">
        Будущее портфолио фотографа.
    </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
    .main-block {
        height: 300px;
        background: purple;
        @include md-desktop {
            background: green;
        }
    }
</style>

После этого перейдем на наш сайт и проинспектируем разметку, стили и подгрузку шрифтов. Все должно быть как на видео ниже:

#

Итог

Засим урок по модулю Nuxt Style Resources подошел к концу. Подведем итог:

1. Мы научились устанавливать Nuxt Style Resources и две его зависимости.
2. Мы создали и добавили к проекту миксины, переменные и научились добавлять шрифты.
3. Мы добавили к проекту файл глобальных стилей, в котором можем использовать переменные.
4. Переменные точно так же можно использовать во всех layout, компонентах и страницах проекта.
5. Мы поняли, что городить большое количество глобальных стилей, миксинов и переменных — это плохо.

Надеюсь урок будет вам полезен.