webpack 如何通过加载器prependData在Nuxt中为所有scss文件添加多个变量

u1ehiz5o 于 2023-10-19 发布在 Webpack

关注(0)|答案(3)|浏览(236)

我是Nuxt 2.13和Sass-loader 8.0.2。我将在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}';`

但它不会加上第二个

webpack

来源：https://stackoverflow.com/questions/65296944/how-to-add-multi-variable-to-all-scss-file-in-nuxt-by-loaders-prependdata

3条答案

按热度按时间

z9smfwbn1#

在nuxt3的情况下，使用以下命令

import { defineNuxtConfig } from 'nuxt'

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

赞(0）回复(0）举报 2023-10-19

4si2a6ki2#

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

赞(0）回复(0）举报 2023-10-19

1dkrff033#

我建议你更新到sass-loader >= 9.0.0，然后将prependData替换为additionalData，它可以是一个函数。

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

赞(0）回复(0）举报 2023-10-19

我来回答

webpack 如何通过加载器prependData在Nuxt中为所有scss文件添加多个变量

3条答案

相关问题

热门标签

最新问答