准备工作

1. 使用stylus编写css

先安装，记得安装loader和原本的stylus库

npm i stylus-loader stylus --save-dev

安装完成之后的vue模版中的写法如下

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>

接下来介绍一点常用的规范css

变量，整体风格颜色，字体大小设置

重置风格，业内有统一的css。

基础的css

图标css

入口引用

@import "./reset.styl"
@import "./base.styl"
@import "./icon.styl"

stylus 函数，在使用到的地方引入

基础的css文件准备好后，在main.js中引入该css

import 'common/stylus/index.styl'

在vue模版中的style中使用的话如下：

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "common/stylus/variable"
  #app
    color : $color-sub-theme
</style>