Stylus在VUE2.0以上的使用

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

转载于:https://juejin.im/post/5b025b266fb9a07aae1579fd