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'