Nuxtjs如何在所有sass文件中添加全局环境变量。

Question

我想在我所有的 sassscss 文件。

到目前为止，我在 nuxt.config.js:

export default {
  ...
  loaders: {
    scss: {
      data: '$myenv: ' + process.env.MY_ENV + ';'
    }
  }
}

我得到了这个错误 mystyle.scss:

未定义变量。"$myenv".我有一个nuxtjs项目，我想在我所有的sassscss文件中加载一个环境变量。

Answer 1

在 loaders 配置属于 build 属性(而不是你的根目录)。如果你的项目是用 create-nuxt-app，默认的 nuxt.config.js 已经包含一个 build 属性，所以你可以在对象的底部移动你的 loaders 配置到该属性中。

例子（用Nuxt CLI v2.12.2测试）。

// nuxt.config.js
export default {
  build: {
    loaders: {
      scss: {
        data: '$myenv: ' + process.env.MY_ENV + ';'

        // use `prependData` for sass-loader > 7.x
        //prependData: '$myenv: ' + process.env.MY_ENV + ';'
      }
    },
  }
}