vue之CSS预处理器stylus

预处理器：预处理器是一种程序，需要将一种程序的数据转换成另一种程序的数据。它可以帮助我们编写可维护的、与时俱进的代码，也可以减少需要编写的CSS数量，这些工具对于哪些需要大量样式表和样式规则的大型用户界面是非常有帮助的。此文主要介绍stylus

1、配置stylus环境

安装

npm install stylus --save-dev
npm install stylus-loader --save-dev

2、应用

Stylus是功能丰富的CSS扩展，有60多种自定义函数，包括saturation()，可以推算适配CSS饱和颜色。

Stylus 可以省略花括号({}), 冒号 (:), 分号 (;)，或者直接使用纯CSS

1）在.vue文件中使用

 2）引入单独的main.styl文件

#app 
    width 100%
    height 100%
    div
        width 100%
        height 30px
        background-color lightBlue

 在main.js中引入.styl文件

import '@/assets/css/main.styl'