首页 > 解决方案 > 如何通过加载器 prependData 向 Nuxt 中的所有 scss 文件添加多变量

问题描述

我是 Nuxt 2.13 和 sass-loader 8.0.2 。我要在我的 scss 文件中添加两个 env 变量。我通过加载器在 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}';`

但它不会添加第二个。

标签: vue.jswebpackvuejs2nuxt.js

解决方案


我建议更新到 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}';`;
},
...

推荐阅读