Как закомпиоировать из scss в css файлы в Nuxt?

В Nuxt.js, для компиляции SCSS файлов в CSS файлы, вам потребуется настроить ваш проект.

1. Установите необходимые зависимости. Откройте командную строку и выполните следующую команду:

npm install --save-dev sass sass-loader@10 fibers

sass и sass-loader являются модулями, необходимыми для компиляции SCSS файлов, а fibers помогает улучшить производительность.

2. Создайте файл nuxt.config.js, если его у вас еще нет. Этот файл содержит конфигурацию вашего Nuxt проекта. Добавьте следующие строки в этот файл:

export default {
  // ...

  buildModules: [
    // ...

    '@nuxtjs/style-resources',
  ],

  styleResources: {
    scss: [
      '~/assets/styles/variables.scss',
      // здесь может быть другой путь к вашему SCSS файлу или ваши SCSS файлы
    ],
  },
  
  build: {
    // ...

    loaders: {
      scss: { implementation: require('sass') },
    },
  },
}

3. Создайте директорию assets/styles в корне вашего проекта, если ее еще нет. В этой директории создайте SCSS файлы (например, variables.scss) или добавьте уже существующие SCSS файлы.

4. Все, настройка завершена. Теперь вы можете использовать SCSS файлы в вашем Nuxt проекте. Просто импортируйте SCSS файлы в любой компонент или страницу, например:

<style lang="scss">
  @import '~/assets/styles/variables.scss';
  // импортируйте другие SCSS файлы
</style>

5. При сборке проекта Nuxt.js автоматически скомпилирует ваши SCSS файлы в CSS и создаст соответствующие CSS файлы в директории .nuxt/dist/client/css. Если вы смотрите на локального сервера, то файлы будут создаваться динамически при каждой пересборке.

Надеюсь, эта подробная инструкция поможет вам настроить компиляцию SCSS файлов в Nuxt.js. Если у вас возникнут еще вопросы, пожалуйста, обратитесь.