詳解vue中引入stylus及報錯解決方法

2019-11-19 15:19:51

字體：大中小

供稿：網(wǎng)友

前提條件是已經(jīng)有了vue項目，如果沒有，請先建立，具體方法看這里https://cn.vuejs.org/v2/guide/installation.html

安裝stylus

好了，建立好項目后我們來安裝stylus

npm install stylus stylus-loader --save-dev

這樣就安裝上了stylus。

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

在.vue文件的style塊中使用

這個很簡單，只要在style標(biāo)簽加上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模塊的方式配置比較復(fù)雜

<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>

在項目中的.vue文件中，如果想使用stylus即：如：