stylus是一個css預處理器，比較流行的css預處理器有sass、less、stylus，它們都一樣，都是css的語法糖，可以使用變量，可以有簡單的邏輯，使css的開發效率更高，更易維護。stylus來自node社區，它的語法兼容性強，個人覺得也更加簡潔，選擇在vue中使用。

安裝stylus

以webpack模板為例，在webpack的loader配置中，已經做好了stylus的兼容，build/utils.js中已有對loader的配置，但默認沒有stylus包和loader包，需要安裝：

cnpm i stylus -D cnpm i stylus-loader -D

因為是預編譯嘛，肯定不用-S了。cnpm確實是快…

內部stylus

vue-cli腳手架搭建的項目中用的是.vue文件，文件里面有三個部分，模板（template）、腳本（script）、樣式表（style）。
其中的style，聲明一下是stylus類型：

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

就可以愉快的使用stylus了。

外部stylus

stylus文件后綴為.styl，不是.css，這和sass、less一樣，要不然怎么知道用的是stylus語法。
外部建好文件以后，.vue中引入：

import '.styl路徑'

就可以使用了

stylus語法

css的各預處理器學習門檻都是很低，畢竟只是語法糖。

segmentFault中的詳細總結：
https://segmentfault.com/a/1190000002712872
大神的中文翻譯手冊：
http://www.zhangxinxu.com/jq/stylus/
stylus官方文檔：
http://stylus-lang.com/

總結

以上是生活随笔為你收集整理的stylus在vue中的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。