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

Posted 2023-02-22

【中文标题】Nuxtjs如何在所有sass文件中添加全局环境变量

【英文标题】：Nuxtjs how to add global environment variable in all sass files

【发布时间】：2020-10-03 19:35:39

【问题描述】：

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

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

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

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

未定义变量：“$myenv”。

【参考方案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`