Блог

Главная - Вопросы по программированию - Импортировать переменную .env в переменные Vuetify.scss

Импортировать переменную .env в переменные Vuetify.scss

#vue.js #webpack #environment-variables #vuetify.js #vue-cli

#vue.js #webpack #переменные среды #vuetify.js #vue-cli

Вопрос:

  • В проекте 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 .

Как мне использовать переменные .env в файле Vuetify variables.scss?

Ответ №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
          }
      }
  }
}

Комментарии:

1. Я получаю эту ошибку: ошибка проверки: недопустимый объект параметров. Загрузчик Sass был инициализирован с использованием объекта options, который не соответствует схеме API. — options имеет неизвестное свойство ‘additionalData’. Допустимы следующие свойства: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

2. Кажется, вы используете более старый загрузчик sass, и ключ не связан. Я отредактировал свой ответ, потому что я не уверен, почему вы используете $${‘VUE_APP_FONT_SIZE’}

3. Большое вам спасибо. Похоже, не хватало только этой части: sass: { prependData: sav }