先安装,记得安装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>