Fix style loader

Author: David-Desmaisons

template/utils.js

@@ -3,8 +3,13 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 exports.cssLoaders = function (options) {
   options = options || {}
+  var isProduction = process.env.NODE_ENV === 'production'
+  var cssLoader = 'css' + (isProduction ? '?minimize' : '')
+
   // generate loader string to be used with extract text plugin
-  function generateLoaders (loaders) {
+  function generateLoaders (loader) {
+    var loaders = [cssLoader]
+    if (loader) loaders.push(loader)
     var sourceLoader = loaders.map(function (loader) {
       var extraParamChar
       if (/\?/.test(loader)) {
@@ -15,24 +20,29 @@ exports.cssLoaders = function (options) {
         extraParamChar = '?'
       }
       return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
-    }).join('!')
+    })
 
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
     if (options.extract) {
-      return ExtractTextPlugin.extract({fallback: 'vue-style-loader', use: sourceLoader})
+      return ExtractTextPlugin.extract({
+        use: sourceLoader,
+        fallback: 'vue-style-loader'
+      })
     } else {
-      return ['vue-style-loader', sourceLoader].join('!')
+      return ['vue-style-loader'].concat(sourceLoader)
     }
   }
 
-  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
+  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
   return {
-    css: generateLoaders(['css']),
-    postcss: generateLoaders(['css']),
-    less: generateLoaders(['css', 'less']),
-    sass: generateLoaders(['css', 'sass?indentedSyntax']),
-    scss: generateLoaders(['css', 'sass']),
-    stylus: generateLoaders(['css', 'stylus']),
-    styl: generateLoaders(['css', 'stylus'])
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass?indentedSyntax'),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
   }
 }
 

template/webpack.config.js

@@ -33,27 +33,6 @@ var webpackOptions = {
           ]
         }
       },
-      { 
-        test: /\.css$/, 
-        loader: ExtractTextPlugin.extract({
-          fallback: "vue-style-loader",
-          use: ["css-loader"]
-        }) 
-      },
-      {
-        test: [/\.scss$/ , /\.sass$/],
-        loader: ExtractTextPlugin.extract({
-          fallback: "vue-style-loader",
-          use:  [ 'css-loader?sourceMap', 'less-loader?sourceMap' ]
-        })
-      },
-      {
-        test: /\.less$/,
-        loader: ExtractTextPlugin.extract({
-          fallback: "vue-style-loader",
-          use: ['css-loader?sourceMap', 'sass-loader?sourceMap' ]
-        })
-      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
@@ -95,8 +74,9 @@ var webpackOptions = {
   devtool: 'source-map',
 }
 
-
+var buildMode = false;
 if (process.env.NODE_ENV === 'production') {
+  buildMode=true
   webpackOptions.externals={
     'vue' : 'Vue'
   }
@@ -129,4 +109,7 @@ if (process.env.NODE_ENV === 'production') {
   }
   webpackOptions.entry= './src/main.js';
 }
+const styleOption = buildMode? { sourceMap: true, extract: true } : { sourceMap: true};
+webpackOptions.module.rules = webpackOptions.module.rules.concat(utils.styleLoaders(styleOption}))
+
 module.exports = webpackOptions