Если вы являетесь фронтенд-разработчиком и работаете с Nuxt 2, вы, вероятно, уже знакомы с его мощными функциями для создания приложений Vue.js, отображаемых на стороне сервера. Но знаете ли вы, что Nuxt 2 также предлагает отличную поддержку SCSS, популярного препроцессора CSS? В этой статье блога мы погрузимся в мир SCSS в Nuxt 2 и рассмотрим несколько методов улучшения рабочего процесса стилизации. Так что берите свой любимый напиток, расслабьтесь и давайте повысим уровень вашего стиля!

1. Базовая настройка.
   Прежде чем мы перейдем к более сложным методам, давайте начнем с основ. Чтобы использовать SCSS в Nuxt 2, вам необходимо установить необходимые зависимости. Откройте терминал и выполните следующую команду:

npm install --save-dev node-sass sass-loader

2. Глобальный файл SCSS:
   Nuxt 2 позволяет вам определить глобальный файл SCSS, который будет импортироваться во все ваши компоненты. Чтобы это настроить, создайте новый файл с именем global.scssв каталоге assetsвашего проекта Nuxt. Добавьте в этот файл свои глобальные стили, например переменные, примеси или служебные классы.

// assets/global.scss
$primary-color: #ff0000;
.button {
  background-color: $primary-color;
  // more styles...
}

Затем откройте файл nuxt.config.jsи добавьте следующий код:

// nuxt.config.js
export default {
  // ...
  css: [
    '~/assets/global.scss'
  ],
  // ...
}

3. Стили с ограниченной областью действия.
   Если вы предпочитаете использовать стили с ограниченной областью действия для каждого компонента, Nuxt 2 поможет вам. Просто создайте блок <style>в файле компонента и напишите там свой SCSS-код.

<template>
  <div>
    <h1>My Awesome Component</h1>
  </div>
</template>
<script>
export default {
  // ...
}
<style lang="scss" scoped>
h1 {
  font-size: 24px;
  color: #333;
}
</style>

4. Модуль «Ресурсы стиля».
   Модуль «Ресурсы стиля» — это удобный модуль Nuxt, который позволяет вам совместно использовать переменные, примеси или функции во всех ваших компонентах без необходимости их явного импорта. Чтобы использовать этот модуль, установите его, выполнив следующую команду:

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

Затем откройте файл nuxt.config.jsи добавьте следующий код:

// nuxt.config.js
export default {
  buildModules: [
    // ...
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: [
      '~/assets/global.scss'
    ]
  },
  // ...
}

Теперь вы можете использовать свои переменные или примеси непосредственно в любом компоненте, не импортируя их!

5. Модули CSS.
   Если вы предпочитаете использовать модули CSS со SCSS в Nuxt 2, это так же просто, как добавить расширение .module.scssв ваш файл SCSS и включить модули CSS для компонента.

<template>
  <div :class="$style.container">
    <h1 :class="$style.title">Hello, CSS Modules!</h1>
  </div>
</template>
<script>
export default {
  // ...
}
<style lang="scss" module>
.container {
  padding: 20px;
}
.title {
  font-size: 24px;
  color: #333;
}
</style>

Поздравляем! Вы изучили несколько мощных методов использования SCSS в Nuxt 2. Хотите ли вы настроить глобальный файл SCSS, использовать стили с ограниченной областью, поделиться ресурсами с модулем Style Resources или использовать модули CSS, Nuxt 2 обладает гибкостью и функциями для удовлетворить ваши потребности в стиле. Так что вперед, экспериментируйте и поднимите свои навыки разработки интерфейса на новый уровень!