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

Question

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

到目前为止我在 nuxt.config.js 中做了什么：

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

我在 mystyle.scss 中遇到了这个错误：

Undefined variable: "$myenv".

Answer 1

loaders配置属于build property (not the root as you have it). If your project was generated with 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 + ';'
      }
    },
  }
}

Answer 2

对于 Nuxt js：

build: {
   loaders: {
     scss: {
       additionalData: `$MAIN_COLOR: ${process.env.NUXT_MAIN_COLOR};`,
     },
   },
 },

在nuxt.config.js

Answer 3

对于nuxt@2.15.3和sass-loader@10.1.1我不得不使用这个配置(nuxt.config.js)。注意在 loaders:

中使用 sass 而不是 scss

export default {
  // ...,

  build: {
    loaders: {
      sass: {
        additionalData: `$main-color: ${process.env.MCOL}`
      }
    }
  }
}

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

Nuxtjs how to add global environment variable in all sass files

sass

node-sass

vue.js

nuxt.js