Компилияция scss в css в Nuxt.js

Question

подскажите, как настроить компиляцию scss файлов в css

файл nuxt.config

css: [
    '@/assets/scss/app.scss',
    '@/assets/scss/media.scss',
    '@/assets/scss/mobile.scss',
  ],
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
    {src: '~/plugins/vue-silentbox', mode: 'client' },
    {src: '~/plugins/vue-modal.js', mode: 'client' },
    {src: '~/plugins/vue-swiper.js', mode: 'client' },
  ],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxt/typescript-build'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/style-resources',
    '@nuxtjs/axios',
    "@nuxtjs/svg",
    '@nuxtjs/pwa',
    '@nuxtjs/device',
  ],
  styleResources: {
    sass: [
      '~/assets/scss/app.scss',
      '~/assets/scss/media.scss',
      '~/assets/scss/mobile.scss',
    ],
  },

Answer 1

1: Устанавливаем зависимости:

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

или

yarn add --dev node-sass sass-loader

2: Добавляем плагин @nuxtjs/style-resources в ваш проект.

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

или

yarn add --dev @nuxtjs/style-resources

3: Добавляем в ваш assets каталог новый каталог sccs (здесь будут храниться файлы с вашими глобальными переменными)

4: В файл конфигурации - nuxt.config.js, добавьте следующие параметры:

export default {
 ...
  css: ["~assets/scss/colors.scss"],
  modules: ["@nuxtjs/style-resources"],
  styleResources: {
    scss: ["./assets/scss/*.scss"]
  }
...
};

Пример - @nuxtjs/style-resources

БЛОГ НА HUSL

Компилияция scss в css в Nuxt.js

Ответы (1 шт):