refactor sryle-loader

makes code more clear and (temporary) fixing dev source maps when extractCSS is on

lib/builder/webpack/base.config.js

@@ -1,7 +1,6 @@
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const { cloneDeep } = require('lodash')
 const { join, resolve } = require('path')
-const webpack = require('webpack')
 const { isUrl, urlJoin } = require('../../common/utils')
 const TimeFixPlugin = require('./plugins/timefix')
 const WarnFixPlugin = require('./plugins/warnfix')
@@ -116,25 +115,6 @@ module.exports = function webpackBaseConfig({ name, isServer }) {
     config.plugins.push(new ExtractTextPlugin(extractOptions))
   }
 
-  // --------------------------------------
-  // Dev specific config
-  // --------------------------------------
-  if (this.options.dev) {
-    //
-  }
-
-  // --------------------------------------
-  // Production specific config
-  // --------------------------------------
-  if (!this.options.dev) {
-    // This is needed in webpack 2 for minify CSS
-    config.plugins.push(
-      new webpack.LoaderOptionsPlugin({
-        minimize: true
-      })
-    )
-  }
-
   // Clone deep avoid leaking config between Client and Server
   return cloneDeep(config)
 }

lib/builder/webpack/server.config.js

@@ -62,13 +62,6 @@ module.exports = function webpackServerConfig() {
     }
   })
 
-  // --------------------------------------
-  // Production specific config
-  // --------------------------------------
-  if (!this.options.dev) {
-
-  }
-
   // Extend config
   if (typeof this.options.build.extend === 'function') {
     const isDev = this.options.dev

lib/builder/webpack/style-loader.js

@@ -2,75 +2,76 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const { join } = require('path')
 
 module.exports = function styleLoader(ext, loaders = [], isVueLoader = false) {
-  // Normalize loaders
+  const sourceMap = Boolean(this.options.build.cssSourceMap)
-  loaders = (Array.isArray(loaders) ? loaders : [loaders]).map(loader => {
-    if (typeof loader === 'string') {
-      loader = { loader }
-    }
-    return Object.assign({
-      options: {
-        sourceMap: this.options.build.cssSourceMap
-      }
-    }, loader)
-  })
 
-  // https://github.com/postcss/postcss-loader
+  // Normalize loaders
-  let postcssLoader
+  loaders = (Array.isArray(loaders) ? loaders : [loaders])
-  if (!isVueLoader && this.options.build.postcss) {
+    .map(loader => Object.assign({ options: { sourceMap } }, typeof loader === 'string' ? { loader } : loader))
-    postcssLoader = {
+
-      loader: 'postcss-loader',
+  // Prepare vue-style-loader
-      options: this.options.build.postcss
+  // https://github.com/vuejs/vue-style-loader
-    }
+  const vueStyleLoader = {
+    loader: 'vue-style-loader',
+    options: { sourceMap }
   }
 
+  // -- Configure additional loaders --
+
+  // style-resources-loader
+  // https://github.com/yenshih/style-resources-loader
+  if (this.options.build.styleResources) {
+    loaders.push({
+      loader: 'style-resources-loader',
+      options: Object.assign({ sourceMap }, this.options.build.styleResources)
+    })
+  }
+
+  // postcss-loader
+  // vue-loader already provides it's own
+  // https://github.com/postcss/postcss-loader
+  if (!isVueLoader && this.options.build.postcss) {
+    loaders.unshift({
+      loader: 'postcss-loader',
+      options: Object.assign({ sourceMap }, this.options.build.postcss)
+    })
+  }
+
+  // css-loader
   // https://github.com/webpack-contrib/css-loader
-  const cssLoader = {
+  loaders.unshift({
     loader: 'css-loader',
     options: {
-      minimize: true,
+      sourceMap,
-      importLoaders: 1,
+      minimize: !this.options.dev,
-      sourceMap: this.options.build.cssSourceMap,
+      importLoaders: loaders.length, // Important!
       alias: {
         '/static': join(this.options.srcDir, 'static'),
         '/assets': join(this.options.srcDir, 'assets')
       }
     }
-  }
+  })
 
-  // https://github.com/vuejs/vue-style-loader
+  // -- With extractCSS --
-  const vueStyleLoader = {
+  // TODO: Temporary disabled in dev mode for fixing source maps
-    loader: 'vue-style-loader',
+  // (We need `source-map` devtool for *.css modules)
-    options: {
+  if (this.options.build.extractCSS && !this.options.dev) {
-      sourceMap: this.options.build.cssSourceMap
+    // ExtractTextPlugin
-    }
+    // https://github.com/webpack-contrib/extract-text-webpack-plugin
-  }
+    const extractLoader = ExtractTextPlugin.extract({
-
+      use: loaders,
-  if (this.options.build.extractCSS) {
+      fallback: vueStyleLoader
-    const extraction = ExtractTextPlugin.extract({
-      fallback: vueStyleLoader,
-      use: [
-        cssLoader,
-        postcssLoader,
-        ...loaders
-      ].filter(l => l)
     })
-    return this.options.dev ? ['css-hot-loader'].concat(extraction) : extraction
-  }
 
-  // https://github.com/yenshih/style-resources-loader
+    // css-hot-loader
-  let styleResourcesLoader
+    // https://github.com/shepherdwind/css-hot-loader
-  if (this.options.build.styleResources) {
+    const hotLoader = {
-    styleResourcesLoader = {
+      loader: 'css-hot-loader',
-      loader: 'style-resources-loader',
+      options: { sourceMap }
-      options: this.options.build.styleResources
     }
+
+    return this.options.dev ? [ hotLoader ].concat(extractLoader) : extractLoader
   }
 
-  return [
+  // -- Without extractCSS --
-    vueStyleLoader,
+  return [ vueStyleLoader ].concat(loaders)
-    cssLoader,
-    postcssLoader,
-    ...loaders,
-    styleResourcesLoader
-  ].filter(l => l)
 }