[Vuejs]-Vue: Extract CSS – Didn't get a result from child compiler

by

0👍

In fact, you do not need to manually import mini-css-extract-plugin in the nuxt project, it has built-in a extract-css-chunks-webpack-plugin.

Using extract-css-chunks-webpack-plugin under the hood, all your CSS will be extracted into separate files, usually one per component. This allows caching your CSS and JavaScript separately and is worth a try in case you have a lot of global or shared CSS.

You only need to configure the build properties in the nuxt.config.js file.

You may want to extract all your CSS to a single file. There is a workaround for this:

export default {
 build: {
   extractCSS: true,
   optimization: {
     splitChunks: {
       cacheGroups: {
         styles: {
           name: 'styles',
           test: /\.(css|vue)$/,
           chunks: 'all',
           enforce: true
         }
       }
     }
   }
 }
}

WARNING: It is not recommended extracting everything into a single file. Extracting into multiple css files is better for caching and preload isolation. It can also improve page performance by downloading and resolving only those resources that are needed.

Leave a comment