how to add multi variable to all scss file in Nuxt by loaders prependData

user_13318436 0
Viewed 597

i'm Nuxt 2.13 and sass-loader 8.0.2 . i'm gonna add two env variables to my scss files. i successfully added one variable by loaders in build section on Nuxtjs:

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

but how add another???

tried

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

but it won't add the 2nd one.

vuejs2 nuxt.js vue.js webpack
3 Answers

I suggest to update to sass-loader 9.0.0 and then replace prependData for additionalData which can be a function.

...
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}';`;
},
...
user_45682500

with Nuxt 2.15.4 there is no need for sass-loader (it is bundled). so :

// 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};
        `
      }
    },
  }
}
user_133184360

in case of nuxt3, use the following

import { defineNuxtConfig } from 'nuxt'

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