vue項目安裝使用stylus步驟

安裝步驟基於使用vue創建的項目

1.創建完成一個初始項目后，通過

npm install stylus -D

命令，在項目內安裝stylus。（注意：命令結尾 -D 即是 --save-dev 的簡寫形式）

2.需要安裝loader，通過

npm install stylus-loader css-loader style-loader --save-dev 

命令。

3.找到 webpack.base.conf.js 文件，並在其中的rules中寫入配置：

{
  test:/\.css$/, loader:'style-loader!css-loader!stylus-loader' } 

4.在組件內部的style標簽中，加入 lang="stylus" 即可。

<style lang="stylus"><style>

這樣就安裝上了stylus,就可以使用stylus了。

接下來就可以使用了，使用方式分兩種。一種是在.vue文件的style塊中使用，一種是引用.styl文件的形式

在.vue文件的style塊中使用

這個很簡單，只要在style標簽加上lang="stylus"就可以了，看完這例子

<style scoped lang="stylus"> .top { height: 80px; line-height: 80px; background-color: #0e5792; min-width: 800px; } .avatar float: left; width: 300px; img width: 60px; height: 60px; display: inline-block; border-radius: 30px; </style> 

外部引用.styl文件
通過css語法引入比較方便，用js模塊的方式配置比較復雜

<style lang="stylus"> @import "assets/base.styl"; #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; } </style> 

stylus的語法，可以去這里看http://www.zhangxinxu.com/jq/stylus/ 張鑫旭寫的還是很好的。

作者：triumphperson
鏈接：https://www.jianshu.com/p/c02f5f94b77e
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。