Nuxtjs如何在所有sass文件中添加全局环境变量 [英] Nuxtjs how to add global environment variable in all sass files

问题描述

我想在我所有的 sass/scss 文件中加载一个环境变量.

I want to load an environment variable in all my sass/scss files.

到目前为止我在 nuxt.config.js 中所做的:

What I have done so far in nuxt.config.js:

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

我在 mystyle.scss 中得到这个错误:

and I got this error in mystyle.scss:

未定义的变量:$myenv".

Undefined variable: "$myenv".

推荐答案

loaders 配置属于 build 属性(不是您拥有的根).如果您的项目是使用 create-nuxt-app 生成的，默认的 nuxt.config.js 已经在对象的底部包含了一个 build 属性，所以你可以将你的 loaders 配置移动到那个财产.

The loaders config belongs under the build property (not the root as you have it). If your project was generated with create-nuxt-app, the default nuxt.config.js already contains a build property at the bottom of the object, so you could move your loaders config into that property.

示例(使用 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 + ';'
      }
    },
  }
}

这篇关于Nuxtjs如何在所有sass文件中添加全局环境变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！