Vuetify-module: extractCss plugin in build config not extracting vuetify css in separate file

[avanishp2]

Hi,

I am working on nuxt project and using vuetify ssr feature for universal app. While building page or serving over the network I have observed that my page size is very large. Page source showing that all the vuetfiy css append in the head tag of the page which increasing the overall page size.

To optimize this, I simply used extractCss: true in my build property. But there is no changes.
I am using the following version

"nuxt": "^2.10.0"
"@nuxtjs/vuetify": "^1.9.0"

My nuxt config file

.....
....
vuetify: {
customVariables: ['~/assets/variables.scss'],
defaultAssets: {
font: false,
icons: 'mdi'
},
treeShake: true
},
build: {
//analyze: true,
extractCss: true
},
....
..

Any help would appreciate.

[kevinmarrec]

Hi @avanishp2 , could you provide repository with the issue reproduction ? I'm using extractCSS (be aware that it's CSS and not Css) and it's correctly splitting in standalone CSS files.

[avanishp2]

Thank you so much. It was spelling mistake from my side. I changed it to extractCSS and it worked.

Now I am getting one warning for a page.

Conflicting order between:
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VTextarea/VTextarea.sass
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VRating/VRating.sass

What should be done for this. As I gone through release note of next release..I think treeshake will automatically take care this.

[kevinmarrec]

Well you seem to have conflicts between postcss-loader & sass-loader.
Consider opening a new issue on Nuxt repo, as it doesn't seem to be something related with this module itself, but some configuration in your project.