修改配置

build/vue-loader.conf.js

@@ -9,6 +9,7 @@ const sourceMapEnabled = isProduction
 module.exports = {
   loaders: utils.cssLoaders({
     sourceMap: sourceMapEnabled,
+    usePostCSS:true,
     extract: isProduction
   }),
   cssSourceMap: sourceMapEnabled,

build/webpack.base.conf.js

@@ -51,8 +51,32 @@ module.exports = {
         options: vueLoaderConfig,
       },
       {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.less$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'less-loader'
+        ]
+      },
+      {
+        test: /\.styl(us)?$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'stylus-loader'
+        ]
+      },
+      {
         test: /\.pug$/,
-        loader: 'pug'
+        loader: 'pug-plain-loader'
       },
       {
         test: /\.js$/,

package.json

@@ -14,6 +14,8 @@
     "axios": "^0.18.0",
     "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.4.9",
+    "moment": "^2.22.2",
+    "underscore": "^1.9.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
@@ -45,18 +47,22 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
-    "moment": "^2.22.2",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
     "node-notifier": "^5.1.2",
+    "node-sass": "^4.9.4",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
+    "postcss-loader": "^2.1.6",
     "postcss-url": "^7.2.1",
     "pug": "^2.0.3",
     "pug-filters": "^3.1.0",
     "pug-loader": "^2.4.0",
+    "pug-plain-loader": "^1.0.0",
     "rimraf": "^2.6.0",
+    "sass-loader": "^7.1.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "stylus": "^0.54.5",
@@ -64,7 +70,7 @@
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",
-    "vue-style-loader": "^3.0.1",
+    "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.5.2",
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",

src/main.js

@@ -4,8 +4,8 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import ElementUI from 'element-ui'
-import './assets/styles/reset.css'
-import './assets/styles/common.css'
+import 'assets/styles/reset.css'
+import 'assets/styles/common.css'
 import 'element-ui/lib/theme-chalk/index.css'
 import Axios from 'axios'
 import * as filters from './filters'