Как добавить несколько переменных во все файлы scss в Nuxt с помощью загрузчиков prependData

у меня Nuxt 2.13 и sass-loader 8.0.2. я собираюсь добавить две переменные env в мои файлы scss. я успешно добавил одну переменную загрузчиками в разделе сборки на Nuxtjs:

build: {
    loaders: {
      scss: {
        prependData: `$base_url: '${process.env.NODE_ENV == 'development' ? process.env.NUXT_BASE_URL : process.env.SITE_BASE_URL+'/'}';`,
      }
    }
  }

а как добавить еще???

пытался

prependData: `$base_url: '${process.env.NODE_ENV == 'development' ? process.env.NUXT_BASE_URL : process.env.SITE_BASE_URL+'/'}';$nuxt_mode: '${process.env.NODE_ENV}';`

но он не добавит 2-й.

vue.js webpack vuejs2 nuxt.js

14.12.2020 22:46

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

1 011

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я предлагаю обновить sass-loader до 9.0.0, а затем заменить prependData на дополнительные данные, которые могут быть функцией.

...
additionalData: _ => {
  return `$base_url: '${process.env.NODE_ENV == 'development' ? process.env.NUXT_BASE_URL : process.env.SITE_BASE_URL+'/'}';$nuxt_mode: '${process.env.NODE_ENV}';`;
},
...

15.12.2020 00:52

Ответ принят как подходящий

с Nuxt 2.15.4 нет необходимости в sass-loader (он идет в комплекте). так :

// nuxt.config.js
export default {
  build: {
    loaders: {
      scss: {
        additionalData: `
          $va1:${process.env.VAR1};
          $va2:${process.env.VAR2};
          $var3:${process.env.VAR3};
          $var4:${process.env.VAR4};
        `
      }
    },
  }
}

12.07.2021 16:57

в случае nuxt3 используйте следующее

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: `@import "@/assets/scss/_variables.scss"; $primary: red;`
                }
            }
        }
    }
})

Танкс. полезно знать при переходе на v3

— 07.07.2022 12:41

06.07.2022 23:05