Webpack: #import CSS file creates files like 0.js or 1.js that take ages to load resulting in showing a webpage without styling

[Patsky]

I'm using Vue-CLI Webpack & vuetify framework for styling. Vuetify It's implemented properly into my app (2 lines of code to import it - all styling showing correctly)

However every time I refresh my webpage I can see my content for a very short time that is not styled with vuetify (like toolbar not set up etc - see attached screenshot)

I figured out that

1. Firstly app.js is loaded in 178ms on Chrome ( 1.1MB )- that sets up everything as on the attached screenshot
2. Then 0.js is loaded in 212ms (109 KB) . After it's loaded - the webpage is styled and looks as it should.

When I look into 0.js I can see in the first lines:

webpackJsonp([0],{
/***/ "./node_modules/css-loader/index.js?{\"sourceMap\":true}!./node_modules/postcss-loader/lib/index.js?{\"sourceMap\":true}!./node_modules/vuetify/dist/vuetify.min.css":
/***/ (function(module, exports, __webpack_require__) {

Which means that vuetify styling is there, and 0.js is created by webpack right?

So far I have updated all packages, even created new projects from scratch using recommended vue init webpack and also vue init vuetifyjs/webpack - but no luck...

It's the same wheter I run with npm run dev or build it with npm run build and deply it to my external server...

I do not know how to make it wait for 0.js (with styling/vuetify) to load before showing anything.

Any help much appreciated...

[Patsky]

Additional note: this issue does not exist when I get CSS directly in index.html ie:

<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">

obviously vuetify.min.css is loaded before app.js and all is working fine.

However if I import it in index.js or main.js like

import Vuetify from 'vuetify' like this
import('../node_modules/vuetify/dist/vuetify.min.css') 
Vue.use(Vuetify)

then 0.js or 1.js files are created that are loaded after app.js

I would like to know why #import CSS in webpack results in my initial issue. And whether there is any solution to it?

[LinusBorg]

Well, you are using import(...) instead of import '.... ', which creates an async chunk that is loaded later.

Solution: use the right syntax.

import '../node_modules/vuetify/dist/vuetify.min.css'

[Patsky]

Ok - now I get this. Thank you @LinusBorg👍 it works. Really appreciate your help!

I was following Vuetify current documentation for 0.17 which cleary says:

// index.js or main.js
import('path/to/node_modules/vuetify/dist/vuetify.min.css') // Ensure you are using css-loader

They are apparently changing this to

// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader

in their new documentation

Thanks again. 👍

[LaoCheng-cjs]

不应该是 @import '../node_modules/vuetify/dist/vuetify.min.css' 吗？