Nuxt.js: проблема с css-loader, который удаляет цитаты из семейства шрифтов

У меня следующая проблема: я создал приложение nuxt.js vue, в котором используется шрифт Google.

Я загружаю его в голову (добавляя URL-адрес в раздел head моего nuxt.config.js) https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700

Затем я использую переменную sass: $s-font-family-base: 'Playfair Display', serif;, которую я использую в своих стилях для отображения этого шрифта.

Теперь, когда я проверяю свой инспектор браузеров при запуске сервера разработки, все выглядит нормально:

введите здесь описание изображения

Но если я использую yarn generate (nuxt generate соответственно), это приведет к свойству font-family с удаленными кавычками. Также, если я заставлю производство жить.

введите здесь описание изображения

Конечно, это неприятно, приводит к неверному CSS и, возможно, к сбою при загрузке шрифта ...

Теперь я предполагаю, что это связано с nuxts css-loader: https://github.com/webpack-contrib/css-loader

Но я не совсем уверен, стоит ли мне открывать там вопрос. (Я начал создавать минимальное репозиторий nuxt для воспроизведения, но затем обнаружил ошибку в руководстве по началу работы: https://cmty.app/nuxt/nuxt.js/issues/c9213) ????????????

В любом случае, пока что я просто хотел найти несколько указателей по этой теме. Ура и спасибо за любую помощь.


webpack javascript nuxt.js css-loader quotes
person Merc    schedule 14.05.2019    source источник
comment
я прокомментировал вашу проблему create nuxt   -  person Aldarund    schedule 16.05.2019

Ответы (1)


arrow_upward
2
arrow_downward

Это решило меня.

Параметр cssnano https://cssnano.co/optimisations/minifyfontvalues/

до

.box {
    font-family: "Helvetica Neue", Arial, Arial, sans-serif;
}

после

.box {
    font-family: Helvetica Neue, Arial, sans-serif;
}

ваш nuxt.config

  build: {
    postcss: {
      plugins: {
        cssnano: {
          preset: ['default', {minifyFontValues: {removeQuotes: false}}]
        }
      }
    }
  },
person Aya Kawasumi    schedule 12.08.2019
comment
Потрясающие. Я постараюсь. Спасибо - person Merc; 12.08.2019