在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/******"。一定要对照好文件路径呀。