Дата публикации
27 Августа 2020
Дата изменения
27 Августа 2020
Уникальных просмотров
94

Оглавление

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;
$very-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: #{$very-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 — у меня получилось вот так:

 Импорт шрифтов в Nuxt.js

Я буду подключать только формат .woff2 и да, мне пофиг на IE11. Динозавры могут проходить мимо.

Теперь подключим эти шрифты через миксин, в файле _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',
    ]
},

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

Осталось проверить что мы все сделали корректно. Для этого откроем файл 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. Мы поняли, что городить большое количество глобальных стилей, миксинов и переменных — это плохо.

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

Благодарность автору

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

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1112 s
Время запросов: 0,1112 s
Количество запросов: 25
Источник: cache