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