Stylus在VUE2.0以上的使用

I O發表於2018-05-21

         在VUE專案中,有的使用了stylus來作為css的預編譯器。在一個已經有的vue專案中,使用npm引入stylus和stylus-loader包。就可以在專案中使用stylus啦。具體操作步驟如下。

第一步:

npm install stylus stylus-loader --save-dev複製程式碼

在專案中的package.json檔案中如果有以下圖片中的兩項,就說明已經引入成功啦。

Stylus在VUE2.0以上的使用

然後再對應的.vue檔案中就可以進行直接使用了。

<style scoped lang="stylus" rel="stylesheet/stylus">


</style>
複製程式碼

常見錯誤:

第一:包引入版本不對。這個大家可以直接在查對應版本來進行引入。

解決辦法:這裡大家可以直接在找相容版本,在package.json檔案裡寫入

 "stylus": "^0.54.5",
 "stylus-loader": "^3.0.2",
複製程式碼

然後使用

npm install複製程式碼

一般都能解決問題啦。

第二:這裡主要說說我遇見的第二種錯誤。

Stylus在VUE2.0以上的使用

顯示引入錯誤。自己找了半天原因,原來是引入檔名字出錯了。

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
複製程式碼

應該是mixin,我寫成了minxin。所以大家一定要注意檔案的路徑和名字。使用import引入時,直接可以 @import "~common/stylus/******"。一定要對照好檔案路徑呀。


相關文章