Nuxt с Vuetify. CSS в теге HEAD
Я был установлен Nuxt с помощью команды npx create-nuxt-app с плагином Vuetify. Затем я запустил сервер через npm run dev или npm run build && npm start, и в исходном коде страницы я вижу стили CSS Vuetify в теге <head>. После некоторого поиска в Google я нашел совет добавить extractCSS: true, в раздел сборки nuxt.config.js. После этого, когда я запускаю npm run build && npm start, css файлы генерируются и ссылаются на страницы, но я все еще вижу некоторые стили CSS (~ 500 строк) в <style data-n-head = "true" id = "vuetify-theme-stylesheet" type = "text/css">. Как я могу скрыть их в файле CSS вместо отображения в теге <head>.
И как я могу извлечь CSS при запуске npm run dev (довольно неприятно прокручивать этот CSS при отладке макета HTML)?
Ответы 1
Не уверен, что это точно такая же проблема, но я обнаружил, что в заголовке каждого предварительно обработанного html файла было много строк CSS цветов Vuetify. В конце концов я нашел https://vuetifyjs.com/en/features/theme/#variations.
When Vuetify generates your application’s theme, it creates 9 variants for each color. For majority of users, these variants are rarely used. This is an opt in feature that will be false by default in the next major version.
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
theme: {
options: { variations: false },
},
})
Добавление options: { variations: false }, как указано выше (вместе с extractCSS: true в Nuxt.config.js), избавило от всего лишнего CSS в предварительно обработанном HTML.
Лучший совет, который у меня есть, - не прокручивать CSS, а просто использовать инструмент Inspect в своем браузере, выбрать элемент и проверить, какие стили в настоящее время применяются к нему. Вы можете быстро и легко повозиться с его стилями, а затем вернуть все в свои исходные файлы.