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

【问题标题】：Nuxtjs how to add global environment variable in all sass filesNuxtjs如何在所有sass文件中添加全局环境变量
【发布时间】：2020-10-03 19:35:39
【问题描述】：

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

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

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

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

未定义变量：“$myenv”。

【问题讨论】：

标签： vue.js sass nuxt.js node-sass

【解决方案1】：

对于 Nuxt js：

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

在 nuxt.config.js 中

【讨论】：

如果你有很多要定义的，你可以这样做：additionalData: '@import "~/assets/scss/variables.scss";'

【解决方案2】：

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 + ';'
      }
    },
  }
}

【讨论】：

在build 属性中移动loaders 配置就可以了。但是将data 更改为prependData 会导致同样的问题。
我正在使用sass-loader v7.1.0。基于vue loader document：如果 sass-loader 版本则使用 data

【解决方案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}`
      }
    }
  }
}

【讨论】：