詳解vue中引入stylus及報(bào)錯(cuò)解決方法
前提條件是已經(jīng)有了vue項(xiàng)目，如果沒有，請(qǐng)先建立，具體方法看這里https://cn.vuejs.org/v2/guide/installation.html
安裝stylus
好了，建立好項(xiàng)目后我們來安裝stylus
npm install stylus stylus-loader --save-dev
這樣就安裝上了stylus。
接下來就可以使用了，使用方式分兩種。一種是在.vue文件的style塊中使用，一種是引用.styl文件的形式
在.vue文件的style塊中使用
這個(gè)很簡(jiǎn)單，只要在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語(yǔ)法引入比較方便，用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>
在項(xiàng)目中的.vue文件中，如果想使用stylus即：如：
<style lang="stylus" ><style>
常常會(huì)報(bào)錯(cuò)如下：
此時(shí)不僅僅需要npm install stylus-loader.還需要npm install stylus 。然后在packge.json文件中寫入
此時(shí)，stylus文件就可用了，項(xiàng)目就可以正常運(yùn)行了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決
這篇文章主要介紹了vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+iview?Table表格多選切換分頁(yè)保持勾選狀態(tài)
這篇文章主要為大家詳細(xì)介紹了vue+iview?Table表格多選切換分頁(yè)保持勾選狀態(tài)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue中this.$confirm的使用及說明方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue從TodoList中學(xué)父子組件通信，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
基于vue 添加axios組件,解決post傳參數(shù)為null的問題
下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為null的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
基于vue+ bootstrap實(shí)現(xiàn)圖片上傳圖片展示功能
這篇文章主要介紹了基于vue+ bootstrap實(shí)現(xiàn)圖片上傳圖片展示功能,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue項(xiàng)目引入ts步驟(小結(jié)),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)timepicker效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue?element修改el-select控件長(zhǎng)度style=“width:XXpx“不生效的解決
這篇文章主要介紹了vue?element修改el-select控件長(zhǎng)度style=“width:XXpx“不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法
這篇文章主要介紹了vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12