Managing the Loading Sequence of CSS Files in Nuxt and Vuetify

Question

Managing the Loading Sequence of CSS Files in Nuxt and Vuetify

I am facing an issue in my Nuxt/Vuetify application where I cannot seem to load my custom CSS file after Vuetify's CSS. Despite attempting to change the order in the CSS array like so:

css: [
    '~/assets/style/main.scss',
    '~/assets/style/app.styl'
  ],

...I have had no success in getting my custom CSS to load after Vuetify's. This problem has also been discussed in a previous question on Stack Overflow, but it seems to remain unanswered, leading me to believe that the issue lies with Vuetify and has not been addressed by the creators.

Is there another explanation for this issue, or is there a possible solution that I am missing?

css vue.js vuetify.js nuxt.js

Answer 1

Answer №1

It's worth mentioning that Nuxt has been facing this issue for some time now, but there are several solutions available.

Option 1: The quick and dirty way...

To address the problem, you can remove the override CSS from your nuxt.config.js file (while keeping Vuetify) and instead place your override code within a style block in your default layout.

<style lang="sass">
  @import assets/style/main.scss
</style>

However, the downside of this method is that you will need to duplicate it for each new layout.

Option #2: The more elegant but potentially complex approach

Another way to tackle this issue is by creating an "all" CSS file and importing both your stylesheets into it. This method may be more complex as it might require compiling your stylus files into CSS before they can be imported. Nevertheless, assuming you are not modifying the Vuetify styles, this approach should work seamlessly.

all.scss (be sure to save it as .scss to ensure processing)

@import "app.styl";
@import "main.scss";

Import all your CSS files (in any desired order) into this single CSS file.

nuxt.config.js

css: [
    '~/assets/style/all.scss',
  ],

Answer 2

It's worth mentioning that Nuxt has been facing this issue for some time now, but there are several solutions available.

Option 1: The quick and dirty way...

To address the problem, you can remove the override CSS from your nuxt.config.js file (while keeping Vuetify) and instead place your override code within a style block in your default layout.

<style lang="sass">
  @import assets/style/main.scss
</style>

However, the downside of this method is that you will need to duplicate it for each new layout.

Option #2: The more elegant but potentially complex approach

Another way to tackle this issue is by creating an "all" CSS file and importing both your stylesheets into it. This method may be more complex as it might require compiling your stylus files into CSS before they can be imported. Nevertheless, assuming you are not modifying the Vuetify styles, this approach should work seamlessly.

all.scss (be sure to save it as .scss to ensure processing)

@import "app.styl";
@import "main.scss";

Import all your CSS files (in any desired order) into this single CSS file.

nuxt.config.js

css: [
    '~/assets/style/all.scss',
  ],

Answer 3

Answer №2

Still facing the issue in vuetify 2.2.19, nuxt 2.0.0, and @nuxt/vuetify. One workaround is to set extractCss: true in the nuxt.config.json file under the build section. However, this caused a hot module replacement (HMR) bug for me where styles weren't dynamically updated in the development environment, requiring a page reload after each style change.

In my case, the more effective solution was:

Disable @nuxt/vuetify, completely remove the vuetify section, and eliminate '@nuxtjs/vuetify from buildModules.
Ensure styles are loaded in the correct order in the styles section of nuxt.config.js. For me, without custom SASS variables in vuetify, it looks like:

css: [
  'vuetify/dist/vuetify.min.css',
  '@mdi/font/css/materialdesignicons.css',
  '~/assets/styles/main.scss'
]

If you do use custom SASS variables, I recommend precompiling vuetify based on them in a separate build step and placing it in the static folder, as these variables typically don't change frequently.
Manually include vuetify using the following plugin:

import Vue from 'vue'
import Vuetify from 'vuetify'
import en from 'vuetify/lib/locale/en'
import lt from 'vuetify/lib/locale/lt'
import pl from 'vuetify/lib/locale/pl'
import colors from '~/config/colors'

Vue.use(Vuetify)

export default ({ app }) => {
  app.vuetify = new Vuetify({
    lang: {
      locales: { en, lt, pl },
      current: 'en'
    },
    icons: {
      iconfont: 'mdi'
    },
    theme: {
      options: {
        customProperties: true
      },
      themes: {
        light: colors
      }
    }
  })
}

Answer 4

Still facing the issue in vuetify 2.2.19, nuxt 2.0.0, and @nuxt/vuetify. One workaround is to set extractCss: true in the nuxt.config.json file under the build section. However, this caused a hot module replacement (HMR) bug for me where styles weren't dynamically updated in the development environment, requiring a page reload after each style change.

In my case, the more effective solution was:

Disable @nuxt/vuetify, completely remove the vuetify section, and eliminate '@nuxtjs/vuetify from buildModules.
Ensure styles are loaded in the correct order in the styles section of nuxt.config.js. For me, without custom SASS variables in vuetify, it looks like:

css: [
  'vuetify/dist/vuetify.min.css',
  '@mdi/font/css/materialdesignicons.css',
  '~/assets/styles/main.scss'
]

If you do use custom SASS variables, I recommend precompiling vuetify based on them in a separate build step and placing it in the static folder, as these variables typically don't change frequently.
Manually include vuetify using the following plugin:

import Vue from 'vue'
import Vuetify from 'vuetify'
import en from 'vuetify/lib/locale/en'
import lt from 'vuetify/lib/locale/lt'
import pl from 'vuetify/lib/locale/pl'
import colors from '~/config/colors'

Vue.use(Vuetify)

export default ({ app }) => {
  app.vuetify = new Vuetify({
    lang: {
      locales: { en, lt, pl },
      current: 'en'
    },
    icons: {
      iconfont: 'mdi'
    },
    theme: {
      options: {
        customProperties: true
      },
      themes: {
        light: colors
      }
    }
  })
}

Answer 5

Answer №3

There appears to be an ongoing issue with Nuxt that has yet to be resolved. According to Vuetify, they do not believe the problem lies on their end: https://github.com/vuetifyjs/vuetify-loader/issues/23

Users have reported inconsistent CSS file loading problems with Nuxt version ^2.7.1. This issue has been discussed in detail here and here.

Efforts are being made to address this issue, as mentioned in this update. However, until a solution is officially released, it may be necessary to revert to a previous version to avoid these problems.

Answer 6

There appears to be an ongoing issue with Nuxt that has yet to be resolved. According to Vuetify, they do not believe the problem lies on their end: https://github.com/vuetifyjs/vuetify-loader/issues/23

Users have reported inconsistent CSS file loading problems with Nuxt version ^2.7.1. This issue has been discussed in detail here and here.

Efforts are being made to address this issue, as mentioned in this update. However, until a solution is officially released, it may be necessary to revert to a previous version to avoid these problems.

Answer 7

Answer №4

I've encountered a similar issue that I managed to resolve.

In my situation, I addressed it by removing all the CSS loading in the nuxt config:

css: [
    // ~/assets/style/app.styl,
    // ~/assets/style/custom.styl,
],

and transferring it to the plugins/vuetify.js file:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/es5/util/colors'

import 'assets/style/app.styl'
import 'assets/style/custom.styl'

Vue.use(Vuetify)

As a result, I am now able to customize the default Vuetify theme, although it does prolong the compilation time when using Hot Module Replacement.

While it may not be the most optimal solution, I struggled to find a more efficient workaround.

Answer 8

I've encountered a similar issue that I managed to resolve.

In my situation, I addressed it by removing all the CSS loading in the nuxt config:

css: [
    // ~/assets/style/app.styl,
    // ~/assets/style/custom.styl,
],

and transferring it to the plugins/vuetify.js file:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/es5/util/colors'

import 'assets/style/app.styl'
import 'assets/style/custom.styl'

Vue.use(Vuetify)

As a result, I am now able to customize the default Vuetify theme, although it does prolong the compilation time when using Hot Module Replacement.

While it may not be the most optimal solution, I struggled to find a more efficient workaround.

Answer 9

Answer №5

Just wanted to share a solution in case it helps someone out there. I recently encountered an issue where a 3rd party library's css was not loading properly in a project built with NUXT. After seeking help on their support channel, a developer pinpointed that the problem stemmed from postcss.

To resolve this issue, we added the following code snippet to the nuxt.config.js file:

nuxt.config.js:
build: {
    postcss: false
}

Additionally, the issue was reported as a bug in NUXT and can be found here: Some CSS rules removed by PostCSS

Answer 10

Just wanted to share a solution in case it helps someone out there. I recently encountered an issue where a 3rd party library's css was not loading properly in a project built with NUXT. After seeking help on their support channel, a developer pinpointed that the problem stemmed from postcss.

To resolve this issue, we added the following code snippet to the nuxt.config.js file:

nuxt.config.js:
build: {
    postcss: false
}

Additionally, the issue was reported as a bug in NUXT and can be found here: Some CSS rules removed by PostCSS

Managing the Loading Sequence of CSS Files in Nuxt and Vuetify

Answer №1

Option 1: The quick and dirty way...

Option #2: The more elegant but potentially complex approach

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Retrieve the value of the following object in a loop - Vue JS

Switching from Webpack-simple to Webpack in a Vue application: A step-by-step guide

Prevent Child Elements from Overstretching Container with Bootstrap Flex

I am experiencing some unwanted movement of divs when I hide one element and show another. Is there a way to prevent this from happening

Creating an adaptable CSS triangle for an image

How can the parent div adjust its height to match the tallest child div?

During DragAndDropToObject in Selenium IDE, the initial element in the list is overlooked

The error message "The export named 'render' (which was imported as 'render') could not be found" appeared

Issues have been reported with Angular 10's router and anchorScrolling feature when used within a div that is positioned absolutely and has overflow set

Exploring CSS3 Border-Radius Compatibility with Internet Explorer 9

Incorporating Vuetify into a Vue CLI application with the help of webpack

Implementing a dual-column design for MailChimp using HTML and CSS

Can Antd's Typography.Paragraph be used as a multi-row Menu title?

Outline of a Bootstrap row

Enhancing the visual appeal of a standard jQuery slider with thumbnails

How to turn off a sticky header on Mobile using CSS

Updating the title of a page on CoreUI's CBreadcrumbRouter dynamically

Is there a way to connect a CSS external file that is saved on Dropbox?

Identify the appearance of a web component being added to the Document Object

Using Vue's computed property to display the current date