将 .env 变量导入 Vuetify variables.scss

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
          }
      }
  }
}