在VUE專案中,有的使用了stylus來作為css的預編譯器。在一個已經有的vue專案中,使用npm引入stylus和stylus-loader包。就可以在專案中使用stylus啦。具體操作步驟如下。
第一步:
npm install stylus stylus-loader --save-dev複製程式碼
在專案中的package.json檔案中如果有以下圖片中的兩項,就說明已經引入成功啦。
然後再對應的.vue檔案中就可以進行直接使用了。
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
複製程式碼
常見錯誤:
第一:包引入版本不對。這個大家可以直接在查對應版本來進行引入。
解決辦法:這裡大家可以直接在找相容版本,在package.json檔案裡寫入
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
複製程式碼
然後使用
npm install複製程式碼
一般都能解決問題啦。
第二:這裡主要說說我遇見的第二種錯誤。
顯示引入錯誤。自己找了半天原因,原來是引入檔名字出錯了。
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
複製程式碼
應該是mixin,我寫成了minxin。所以大家一定要注意檔案的路徑和名字。使用import引入時,直接可以 @import "~common/stylus/******"。一定要對照好檔案路徑呀。