定义stylus变量配置

.babelrc

@@ -9,5 +9,12 @@
     }],
     "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
+  "plugins": [
+    "transform-vue-jsx",
+    "transform-runtime",
+    ["import", {
+        "libraryName": "view-design",
+        "libraryDirectory": "src/components"
+    }]
+  ]
 }

build/utils.js

@@ -54,6 +54,19 @@ exports.cssLoaders = function (options) {
     }
   }
 
+  /**
+   * 下面的stylus配置便于可全局使用stylus定义的变量
+   */
+  const stylusOptions = {
+    import: [
+      path.join(__dirname, '../src/assets/css/variables.styl')
+    ],
+    path: [
+      path.join(__dirname, '../src/assets'),
+      path.join(__dirname, '../')
+    ]
+  }
+
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
     css: generateLoaders(),
@@ -61,8 +74,8 @@ exports.cssLoaders = function (options) {
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
     scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
+    stylus: generateLoaders('stylus', stylusOptions),
+    styl: generateLoaders('stylus', stylusOptions)
   }
 }
 

build/webpack.base.conf.js

@@ -74,6 +74,14 @@ module.exports = {
           limit: 10000,
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
+      },
+      {
+        test: /\.styl(us)?$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'stylus-loader'
+        ]
       }
     ]
   },

package.json

@@ -14,6 +14,7 @@
     "babel-polyfill": "^6.26.0",
     "countup.js": "^2.0.4",
     "echarts": "^4.4.0",
+    "view-design": "^4.0.2",
     "vue": "^2.5.2",
     "vue-countup-v2": "^4.0.0",
     "vue-router": "^3.0.1"
@@ -24,6 +25,7 @@
     "babel-eslint": "^8.2.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-import": "^1.12.2",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
@@ -50,6 +52,8 @@
     "rimraf": "^2.6.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",

src/App.vue

@@ -10,27 +10,25 @@ export default {
 }
 </script>
 
-<style>
-@font-face {
-  font-family: DIN;
-  src: url(./assets/font/DIN-Medium.otf);
-}
-@font-face {
-  font-family: Microsoft YaHei UI;
-  src: url(./assets/font/Microsoft-YaHei-UI-Bold.ttf);
-}
-html, body {
-  width: 100%;
-  height: 100%;
-  user-select: none;
-}
-#app {
+<style lang="stylus">
+@import './assets/css/variables.styl'
+
+@font-face
+  font-family DIN
+  src url(./assets/font/DIN-Medium.otf)
+@font-face
+  font-family Microsoft YaHei UI
+  src url(./assets/font/Microsoft-YaHei-UI-Bold.ttf)
+html, body
+  width 100%
+  height 100%
+  user-select none
+#app
   /* font-family: 'Avenir', Helvetica, Arial, sans-serif; */
-  font-family: DIN, Microsoft YaHei UI, 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  width: 100%;
-  height: 100%;
-  color: #2c3e50;
-}
+  font-family DIN, Microsoft YaHei UI, 'Avenir', Helvetica, Arial, sans-serif
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+  width 100%
+  height 100%
+  color $fontColor
 </style>

src/assets/css/variables.styl

+$fontColor = #2c3e50

src/components/HelloWorld.vue

@@ -95,19 +95,20 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
+<style lang="stylus" scoped>
+$red = gold
+h1, h2
+  font-weight normal
+  color $red
+ul
+  list-style-type none
+  padding 0
+
 li {
   display: inline-block;
   margin: 0 10px;
 }
 a {
-  color: #42b983;
+  color: $red;
 }
 </style>

src/main.js

@@ -4,8 +4,11 @@ import 'babel-polyfill'
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import {Button} from 'view-design'
+import 'view-design/dist/styles/iview.css'
 
 Vue.config.productionTip = false
+Vue.component('Button', Button)
 
 /* eslint-disable no-new */
 new Vue({

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import Main from '@/views/main'
 
 Vue.use(Router)
 
@@ -8,8 +8,8 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      name: 'main',
+      component: Main
     }
   ]
 })

src/views/main.vue

+<template>
+<div class="main-container">
+  <div class="box1"></div>
+  <div class="box2"></div>
+  <div class="box3"></div>
+  <div class="box4"></div>
+  <div class="box5"></div>
+  <div class="box6"></div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'Main',
+}
+</script>
+
+<style lang="stylus" scoped>
+.main-container
+  background $fontColor
+  width 100%
+  height 100%
+  display grid
+  grid-template-areas \
+    'box1 box1 box1'\
+    'box2 box3 box4'\
+    'box5 box3 box4'\
+    'box6 box6 box6'
+  grid-template-rows 1fr 3fr 3fr 1fr
+  grid-gap 10px
+  padding 10px
+  .box1
+    background red
+    grid-area box1
+  .box2
+    background blue
+    grid-area box2
+  .box3
+    background gold
+    grid-area box3
+  .box4
+    background green
+    grid-area box4
+  .box5
+    background gray
+    grid-area box5
+  .box6
+    background #fff
+    grid-area box6
+</style>