bundle.css

EroCode · Dec 22, 2017 · 33b5857 · 33b5857
1 parent 0cee4c8
commit 33b5857
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -85,6 +85,9 @@ npm run mock
     * vue-router
     * axios
     * json-server // for mock
+    * mockjs
 * CSS
+    * SASS
     * PostCSS
-    * cssnext
+    * cssnext
+    * element-ui
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
+import 'normalize.css';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -3,9 +3,8 @@ const path = require('path');
 const url = require('url');
 
 // const webpack = require('webpack');
-
-// var ExtractTextPlugin = require('extract-text-webpack-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+// const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const publicPath = '';
@@ -19,17 +18,24 @@ module.exports = (options = {}) => ({
     module: {
         rules: [{
             test: /\.css$/,
-            use: [
-                'style-loader',
-                'css-loader',
-                // {
-                //     loader: 'css-loader',
-                //     options: {
-                //         importLoaders: 1
-                //     }
-                // },
-                'postcss-loader'
-            ]
+            // use: [
+            //     'style-loader',
+            //     'css-loader',
+            //     // {
+            //     //     loader: 'css-loader',
+            //     //     options: {
+            //     //         importLoaders: 1
+            //     //     }
+            //     // },
+            //     'postcss-loader'
+            // ]
+            use: ExtractTextPlugin.extract({  
+                fallback: 'style-loader',  
+                use: [  
+                    'css-loader',
+                    'postcss-loader'
+                ]  
+            })  
             // use: ExtractTextPlugin.extract({
             //     fallback: 'style-loader',
             //     use: [{
@@ -54,11 +60,27 @@ module.exports = (options = {}) => ({
         // },
         {
             test: /\.scss$/,
-            loader: 'style!css!sass'
+            // loader: 'style!css!sass'
+            use: ExtractTextPlugin.extract({  
+                fallback: 'style-loader',  
+                use: [  
+                    'css-loader',
+                    'postcss-loader',
+                    'sass-loader'
+                ]  
+            })  
         },
         {
             test: /\.vue$/,
-            loader: 'vue-loader'
+            loader: 'vue-loader',
+            options: {
+                loaders: {
+                    scss: ExtractTextPlugin.extract({
+                        use: ['css-loader','postcss-loader','sass-loader'],
+                        fallback: 'vue-style-loader' 
+                    })
+                }
+            }
         },
         {
             test: /(\.jsx|\.js)$/,
@@ -80,8 +102,8 @@ module.exports = (options = {}) => ({
         ]
     },
     plugins: [
-        new CleanWebpackPlugin(['dist']),
-        // new ExtractTextPlugin('bundle.css'),
+        // new CleanWebpackPlugin(['dist']),
+        new ExtractTextPlugin('bundle.css'),
         new HtmlWebpackPlugin({
             title: 'DircleFeed',
             template: 'src/index.html'