Nuxt with Vuetify. CSS in HEAD tag

user_2931721 0
Viewed 708

I was installed Nuxt via command npx create-nuxt-app with Vuetify plugin. Then I ran server via npm run dev or npm run build && npm start and in page source I see CSS styles of Vuetify in <head> tag. After some googleing I found advice add extractCSS: true, in build section of nuxt.config.js. After that when I run npm run build && npm start css files are generating and linking to pages, but I still see some CSS styling (~500 lines) in <style data-n-head="true" id="vuetify-theme-stylesheet" type="text/css">. How I can hide them to CSS file instead of displaying in <head> tag.

And how I can extract CSS when start npm run dev (pretty annoying to scroll this CSS when debug HTML layout)?

nuxt.js vuetify.js webpack node.js
1 Answers

Not sure if this is exactly the same issue but I found had many lines of Vuetify colours CSS in the head of each pre-rendered html file. I eventually found 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 },
  },
})

Adding options: { variations: false } as above (along with extractCSS: true in Nuxt.config.js) got rid of all superfluous CSS in the pre-rendered html.

user_119172280
Related