詳解vue中引入stylus及報(bào)錯(cuò)解決方法
更新時(shí)間：2017年09月22日 11:46:06 作者：shooke
這篇文章主要介紹了詳解vue中引入stylus及報(bào)錯(cuò)解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
前提條件是已經(jīng)有了vue項(xiàng)目，如果沒(méi)有，請(qǐng)先建立，具體方法看這里https://cn.vuejs.org/v2/guide/installation.html
安裝stylus
好了，建立好項(xiàng)目后我們來(lái)安裝stylus
npm install stylus stylus-loader --save-dev
這樣就安裝上了stylus。
接下來(lái)就可以使用了，使用方式分兩種。一種是在.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文件
通過(guò)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文件中寫(xiě)入
此時(shí)，stylus文件就可用了，項(xiàng)目就可以正常運(yùn)行了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在本文中小編給大家分享的是關(guān)于vue引入子組件方法和先關(guān)注意點(diǎn)，有需要的朋友們可以學(xué)習(xí)下。2019-02-02
我們知道，Vite?構(gòu)建環(huán)境分為開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境，不同環(huán)境會(huì)有不同的構(gòu)建策略，但不管是哪種環(huán)境，Vite?都會(huì)首先解析用戶(hù)配置，那接下來(lái)，本文就來(lái)與大家分析配置解析過(guò)程中?Vite?到底做了什么？即Vite是如何加載配置文件的2023-11-11
element-plus+Vue3實(shí)現(xiàn)表格數(shù)據(jù)動(dòng)態(tài)渲染
在Vue中,el-table是element-ui提供的強(qiáng)大表格組件,可以用于展示靜態(tài)和動(dòng)態(tài)表格數(shù)據(jù),本文主要介紹了element-plus+Vue3實(shí)現(xiàn)表格數(shù)據(jù)動(dòng)態(tài)渲染,感興趣的可以了解一下2024-03-03
這篇文章主要介紹了vue如何讀取本地文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對(duì)的數(shù)據(jù),localStorage 用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間,直到手動(dòng)去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧2023-12-12
本篇文章主要介紹了VueJS事件處理器v-on的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了Vue之創(chuàng)建項(xiàng)目及目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)短信驗(yàn)證碼輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
這篇文章主要介紹了vue中的proxy代理的用法(解決跨域問(wèn)題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue-cli中的babel配置文件.babelrc實(shí)例詳解
Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。本文介紹vue-cli腳手架工具根目錄的babelrc配置文件，感興趣的朋友一起看看吧2018-02-02