Vuetify: [Bug Report] using #import in webpack results in non styled page on page refresh

[Patsky]

Versions and Environment

Vuetify: 0.17.6
Vue: 2.5.2
Browsers: Firefox 57.0
OS: Mac OS 10.13

Steps to reproduce

it might be challenging as I do not know conditions when Webpack creates 0.js or 1.js files with vuetify.min.css

Expected Behavior

Webpage should be refreshed in a clean manner - not showing unstyled elements.

Actual Behavior

on page refresh you can notice:

• unstyled elements (see attached)

How long you can see it:

• it just flashes on fast internet connection but it's noticable
• on slow internet connection (3g) it's visible for much longer

Reproduction Link

https://github.com/vuetifyjs/vuetify

Other comments

I'm guessing it's due to styling on render?
In my case webpack creates additional file 0.js (sometimes 1.js) when using

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

in my main.js file
It's exactly the same when I start everything from scratch with vue init vuetifyjs/webpack with all updated packages.
Doesn't matter if I use npm run dev or npm run build and publish to my server

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__) {

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 (no v-toolbar etc)
2) Then 0.js is loaded in 212ms (109 KB) . After it's loaded - the webpage is styled wtih Vuetify and looks as it should.

Workaround
The only one workaround is to remove import('../node_modules/vuetify/dist/vuetify.min.css') from main.js and get CSS directly in index.html

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

Which makes using recommended Webpack method a bit hit and miss.

[KaelWD]

https://next.vuetifyjs.com/getting-started/quick-start#existing-applications

Use import 'vuetify/dist/vuetify.min.css'
or require('vuetify/dist/vuetify.min.css')
or import(/* webpackMode: "eager" */'vuetify/dist/vuetify.min.css')
to load the css in your primary chunk, or you can use extract-text-webpack-plugin (or import directly into your sass/stylus entry) to load it in a separate css file.

[Patsky]

Thank you @KaelWD 👍 it works. Really appreciate your help!
I was following the current documentation for 0.17 which says:

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

not sure if you want to change it / make remarks.

Thanks again. 👍

[KaelWD]

Thanks for the heads up, that's quite clearly incorrect on our part.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord