use postcss fixed #9

Author: Plortinus

package.json

@@ -12,6 +12,7 @@
     "vue": "^2.2.6"
   },
   "devDependencies": {
+    "autoprefixer": "^6.7.7",
     "babel-core": "^6.24.1",
     "babel-loader": "^6.4.1",
     "babel-preset-es2015": "^6.24.1",
@@ -25,6 +26,7 @@
     "glob": "^7.1.1",
     "html-loader": "^0.4.5",
     "html-webpack-plugin": "^2.28.0",
+    "postcss-loader": "^1.3.3",
     "style-loader": "^0.16.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^11.3.4",

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')()
+  ]
+}

src/pages/user/index/app.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+    <h1>Use PostCSS</h1>
     <modal></modal>
     <div class="dd">
       Index
@@ -36,8 +37,13 @@ export default {
 }
 </script>
 
-<style>
+<style lang="postcss">
   body {
     background-color: #f5f5f5;
   }
+  :root h1 {
+   --color: red;
+   display: flex;
+   color: var(--color);
+  }
 </style>

webpack.config.js

@@ -39,6 +39,10 @@ const config = {
             css: ExtractTextPlugin.extract({
               use: 'css-loader',
               fallback: 'style-loader'
+            }),
+            postcss: ExtractTextPlugin.extract({
+              use: ['css-loader', 'postcss-loader'],
+              fallback: 'style-loader'
             })
           }
         }
@@ -51,8 +55,8 @@ const config = {
       {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader'
+          use: ['css-loader', 'postcss-loader'],
+          fallback: 'style-loader'
         })
       },
       {