如何通过加载器 prependData 向 Nuxt 中的所有 scss 文件添加多变量答案

【问题标题】：how to add multi variable to all scss file in Nuxt by loaders prependData如何通过加载器 prependData 向 Nuxt 中的所有 scss 文件添加多变量
【发布时间】：2020-12-14 21:46:51
【问题描述】：

我是 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.js webpack vuejs2 nuxt.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：