Question

在Vue-cli Webpack项目中，我在.env文件中定义了一个环境变量，如下所示：VUE_APP_FONT_SIZE=30px
然后在vue.config.js中，我像这样“添加”它：

let sav = ''
    
if (/VUE_APP_/i.test('VUE_APP_FONT_SIZE')) {
    sav += `$${'VUE_APP_FONT_SIZE'}: "${process.env['VUE_APP_FONT_SIZE']}";`
}
    
module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: sav
            }
        }
    }
}

然后，我可以在任何.scss文件中使用它，例如：font-size: unquote($VUE_APP_FONT_SIZE);
但是，如果我尝试像这样在Vuetify variables.scss文件中使用它：$font-size-root: $VUE_APP_FONT_SIZE;我会得到指向$VUE_APP_FONT_SIZE的未定义变量错误。

如何在Vuetify variables.scss文件中使用.env变量？

Answer 1

似乎您也将变量值用作变量名。也许只是尝试直接设置变量名称。

// vue.config.js
if (/VUE_APP_/i.test('VUE_APP_FONT_SIZE')) {
    // make sure this is executed
    sav += `$VUE_APP_FONT_SIZE: "${process.env['VUE_APP_FONT_SIZE']}";`
}

module.exports = {
  css: {
      loaderOptions: {
          scss: {
              prependData: sav
          },
          sass: {
              prependData: sav
          }
      }
  }
}

将.env变量导入Vuetify variables.scss

1 个答案: