Css->預處理器在html開發模式中的使用(stylus篇)

寫在前面

在SPA但也應用開發中，咱們能夠實現組件化和模塊化的開發模式，css也可使用預處理器，能夠很方便咱們開發者提升效率，可是後來我發現脫離了vue腳手架的開發模式，不少同窗都不會使用css預處理器了，那麼今天就帶你們一步一步來構建完成css預處理器使用。
這樣來操做

第一步

全局安裝stylus環境

npm i -g stylus
複製代碼

第二步

搭建目錄結構
1.建立項目example
2.項目中建立style目錄
3.style目錄下建立css和stylus兩個文件

第三步

在stylus目錄下建立一個文件(common.styl爲例),並編寫如下代碼

html,
body
    min-height 100%
    background-color red

複製代碼

第四步

啓動命令行工具，進入到stylus目錄，執行命令編譯.styl文件到指定目錄(實時)

stylus -w common.styl -o ../css/common.css
複製代碼

這樣咱們就能夠只關注對.styl或者其餘預處理器的代碼，不用每一次都去手動編譯

說明

-w 表明實時監聽對應的文件，省得每次都要手動編譯
-o 表明指定編譯到某一個路徑

寫在最後

但願個人分享對你有所幫助，更多資訊請持續關注，我會分享愈來愈多的實戰經驗哦！ 或加入大前端知識體系社區一塊兒探索技術:608229520