refactor: move mini-css-extract-plugin to client

lib/builder/webpack/base.config.mjs

@@ -1,6 +1,5 @@
 import path from 'path'
 
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import FriendlyErrorsWebpackPlugin from '@nuxtjs/friendly-errors-webpack-plugin'
 import TimeFixPlugin from 'time-fix-plugin'
 import webpack from 'webpack'
@@ -11,7 +10,7 @@ import { isUrl, urlJoin } from '../../common/utils'
 import WarnFixPlugin from './plugins/warnfix'
 import ProgressPlugin from './plugins/progress'
 import vueLoader from './vue-loader'
-import styleLoader from './style-loader'
+import styleLoaderWrapper from './style-loader'
 
 /*
 |--------------------------------------------------------------------------
@@ -26,6 +25,7 @@ export default function webpackBaseConfig({ name, isServer }) {
   const webpackModulesDir = ['node_modules'].concat(this.options.modulesDir)
 
   const configAlias = {}
+  const styleLoader = styleLoaderWrapper({ isServer })
 
   // Used by vue-loader so we can use in templates
   // with <img src="~/assets/nuxt.png"/>
@@ -161,14 +161,6 @@ export default function webpackBaseConfig({ name, isServer }) {
     })
   )
 
-  // CSS extraction
-  const extractCSS = this.options.build.extractCSS
-  if (extractCSS && !this.options.dev) {
-    config.plugins.push(new MiniCssExtractPlugin(Object.assign({
-      filename: this.getFileName('css')
-    }, typeof extractCSS === 'object' ? extractCSS : {})))
-  }
-
   // Clone deep avoid leaking config between Client and Server
   return _.cloneDeep(config)
 }

lib/builder/webpack/client.config.mjs

@@ -6,6 +6,7 @@ import webpack from 'webpack'
 import HTMLPlugin from 'html-webpack-plugin'
 import StylishPlugin from 'webpack-stylish'
 import BundleAnalyzer from 'webpack-bundle-analyzer'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 
 import Debug from 'debug'
 import base from './base.config'
@@ -154,5 +155,13 @@ export default function webpackClientConfig() {
     }
   }
 
+  // CSS extraction
+  const extractCSS = this.options.build.extractCSS
+  if (extractCSS) {
+    config.plugins.push(new MiniCssExtractPlugin(Object.assign({
+      filename: this.getFileName('css')
+    }, typeof extractCSS === 'object' ? extractCSS : {})))
+  }
+
   return config
 }

lib/builder/webpack/style-loader.js

@@ -4,7 +4,8 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 
 import postcssConfig from './postcss'
 
-export default function styleLoader(ext, loaders = [], isVueLoader = false) {
+export default ({isVueLoader = false, isServer}) => {
+  return function styleLoader(ext, loaders = []) {
     const sourceMap = Boolean(this.options.build.cssSourceMap)
 
     // Normalize loaders
@@ -66,7 +67,7 @@ export default function styleLoader(ext, loaders = [], isVueLoader = false) {
     })
 
     // -- With extractCSS --
-  if (this.options.build.extractCSS) {
+    if (!isServer && this.options.build.extractCSS) {
       loaders.unshift(MiniCssExtractPlugin.loader)
       if (this.options.dev) {
         // css-hot-loader
@@ -86,3 +87,4 @@ export default function styleLoader(ext, loaders = [], isVueLoader = false) {
     }
     return loaders
   }
+}

lib/builder/webpack/vue-loader.mjs

@@ -1,8 +1,12 @@
 import postcssConfig from './postcss'
-import styleLoader from './style-loader'
+import styleLoaderWrapper from './style-loader'
 
 export default function vueLoader({ isServer }) {
   // https://vue-loader.vuejs.org/en
+  const styleLoader = styleLoaderWrapper({
+    isServer,
+    isVueLoader: true
+  })
   const config = {
     postcss: postcssConfig.call(this),
     cssSourceMap: this.options.build.cssSourceMap,
@@ -13,17 +17,16 @@ export default function vueLoader({ isServer }) {
         options: this.getBabelOptions({ isServer })
       },
       // Note: do not nest the `postcss` option under `loaders`
-      css: styleLoader.call(this, 'css', [], true),
-      less: styleLoader.call(this, 'less', 'less-loader', true),
-      scss: styleLoader.call(this, 'scss', 'sass-loader', true),
+      css: styleLoader.call(this, 'css', []),
+      less: styleLoader.call(this, 'less', 'less-loader'),
+      scss: styleLoader.call(this, 'scss', 'sass-loader'),
       sass: styleLoader.call(
         this,
         'sass',
-        { loader: 'sass-loader', options: { indentedSyntax: true } },
-        true
+        { loader: 'sass-loader', options: { indentedSyntax: true } }
       ),
-      stylus: styleLoader.call(this, 'stylus', 'stylus-loader', true),
-      styl: styleLoader.call(this, 'stylus', 'stylus-loader', true)
+      stylus: styleLoader.call(this, 'stylus', 'stylus-loader'),
+      styl: styleLoader.call(this, 'stylus', 'stylus-loader')
     },
     template: {
       doctype: 'html' // For pug, see https://github.com/vuejs/vue-loader/issues/55