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

安裝stylus

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

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

因?yàn)槭穷A(yù)編譯嘛，肯定不用-S了。cnpm確實(shí)是快…

內(nèi)部stylus

vue-cli腳手架搭建的項(xiàng)目中用的是.vue文件，文件里面有三個(gè)部分，模板（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的各預(yù)處理器學(xué)習(xí)門檻都是很低，畢竟只是語法糖。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。