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

更新時間：2017年09月22日 11:46:06 作者：shooke

這篇文章主要介紹了詳解vue中引入stylus及報錯解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前提條件是已經(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即：如：

<style lang="stylus" ><style>

這里寫圖片描述

常常會報錯如下：

這里寫圖片描述

此時不僅僅需要npm install stylus-loader.還需要npm install stylus 。然后在packge.json文件中寫入

這里寫圖片描述

此時，stylus文件就可用了，項目就可以正常運行了。

這里寫圖片描述

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
stylus

相關(guān)文章

vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決
這篇文章主要介紹了vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue+iview?Table表格多選切換分頁保持勾選狀態(tài)
這篇文章主要為大家詳細(xì)介紹了vue+iview?Table表格多選切換分頁保持勾選狀態(tài)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
vue中this.$confirm的使用及說明
這篇文章主要介紹了vue中this.$confirm的使用及說明方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue從TodoList中學(xué)父子組件通信
這篇文章主要介紹了Vue從TodoList中學(xué)父子組件通信，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
基于vue 添加axios組件,解決post傳參數(shù)為null的問題
下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為null的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
基于vue+ bootstrap實現(xiàn)圖片上傳圖片展示功能
這篇文章主要介紹了基于vue+ bootstrap實現(xiàn)圖片上傳圖片展示功能,需要的朋友可以參考下
2017-05-05
vue項目引入ts步驟(小結(jié))
這篇文章主要介紹了vue項目引入ts步驟(小結(jié)),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
基于Vue實現(xiàn)timepicker
這篇文章主要為大家詳細(xì)介紹了基于Vue實現(xiàn)timepicker效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
vue?element修改el-select控件長度style=“width:XXpx“不生效的解決
這篇文章主要介紹了vue?element修改el-select控件長度style=“width:XXpx“不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue favicon設(shè)置以及動態(tài)修改favicon的方法
這篇文章主要介紹了vue favicon設(shè)置以及動態(tài)修改favicon的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12