extract css from .vue file

Author: Plortinus

package.json

@@ -8,28 +8,28 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "element-ui": "^1.2.3",
-    "vue": "^2.2.1"
+    "element-ui": "^1.2.8",
+    "vue": "^2.2.6"
   },
   "devDependencies": {
-    "babel-core": "^6.23.1",
-    "babel-loader": "^6.3.2",
-    "babel-preset-es2015": "^6.22.0",
-    "cross-env": "^3.2.3",
-    "css-loader": "^0.26.2",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^6.4.1",
+    "babel-preset-es2015": "^6.24.1",
+    "cross-env": "^4.0.0",
+    "css-loader": "^0.28.0",
+    "eslint": "^3.19.0",
+    "eslint-config-vue": "^2.0.2",
+    "eslint-plugin-vue": "^2.0.1",
     "extract-text-webpack-plugin": "^2.1.0",
-    "file-loader": "^0.10.1",
+    "file-loader": "^0.11.1",
     "glob": "^7.1.1",
     "html-loader": "^0.4.5",
     "html-webpack-plugin": "^2.28.0",
-    "style-loader": "^0.13.2",
+    "style-loader": "^0.16.1",
     "url-loader": "^0.5.8",
-    "vue-loader": "^11.1.4",
-    "vue-template-compiler": "^2.2.1",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.1",
-    "eslint": "^3.17.0",
-    "eslint-config-vue": "^2.0.2",
-    "eslint-plugin-vue": "^2.0.1"
+    "vue-loader": "^11.3.4",
+    "vue-template-compiler": "^2.2.6",
+    "webpack": "^2.3.3",
+    "webpack-dev-server": "^2.4.2"
   }
 }

src/pages/user/index/app.vue

@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style>
-body {
-  font-family: Helvetica, sans-serif;
-}
+  body {
+    background-color: #f5f5f5;
+  }
 </style>

src/pages/user/login/app.vue

@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style>
-body {
-  font-family: Helvetica, sans-serif;
-}
+  body {
+    background-color: #c3c3c3;
+  }
 </style>

webpack.config.js

@@ -33,7 +33,15 @@ const config = {
     rules: [
       {
         test: /\.vue$/,
-        use: 'vue-loader'
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: ExtractTextPlugin.extract({
+              use: 'css-loader',
+              fallback: 'style-loader'
+            })
+          }
+        }
       },
       {
         test: /\.js$/,
@@ -77,7 +85,7 @@ const config = {
       minChunks: chunks.length
     }),
     new ExtractTextPlugin({
-      filename: 'assets/css/main.css',
+      filename: 'assets/css/[name].css',
       allChunks: true
     })
   ],