详解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 相关文章推荐
学习javascript,实现插入排序实现代码
Jul 31 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 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字符串截取问题
2006/11/28 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
安装vue-cli的简易过程
2018/05/22 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
如何开启linux的ssh服务
2013/06/03 面试题
2015年大学生社会实践评语
2015/03/26 职场文书
golang slice元素去重操作
2021/04/30 Golang