详解vue中引入stylus及报错解决方法


Posted in Javascript onSeptember 22, 2017

前提条件是已经有了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标签加上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模块的方式配置比较复杂

<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>

详解vue中引入stylus及报错解决方法 

常常会报错如下:

详解vue中引入stylus及报错解决方法 

此时不仅仅需要npm install stylus-loader.还需要npm install stylus 。然后在packge.json文件中写入

详解vue中引入stylus及报错解决方法 

此时,stylus文件就可用了,项目就可以正常运行了。

详解vue中引入stylus及报错解决方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
移动端js触摸事件详解
Sep 18 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 Javascript
EL表达式截取字符串的函数说明
Sep 22 #Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 #Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 #Javascript
ES6中新增的Object.assign()方法详解
Sep 22 #Javascript
Vee-Validate的使用方法详解
Sep 22 #Javascript
Js中async/await的执行顺序详解
Sep 22 #Javascript
Node.js自定义实现文件路由功能
Sep 22 #Javascript
You might like
PHP form 表单传参明细研究
2009/07/17 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
js常见表单应用技巧
2008/01/09 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
使用D3.js制作图表详解
2017/08/13 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
QML实现钟表效果
2020/06/02 Python
毕业自我鉴定
2013/11/05 职场文书
结婚邀请函范文
2014/01/14 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
技能培训通讯稿
2015/07/18 职场文书
企业法律事务工作总结
2015/08/11 职场文书
学生会部长竞选稿
2015/11/19 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
python画条形图的具体代码
2022/04/20 Python
muduo TcpServer模块源码分析
2022/04/26 Redis
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python