详解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 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 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如何解决无法上传大于8M的文件问题
2014/03/10 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
解读python logging模块的使用方法
2018/04/17 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
python中pyplot基础图标函数整理
2020/11/10 Python
python 下载文件的多种方法汇总
2020/11/17 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
会计岗位职责
2013/11/08 职场文书
活动总结报告怎么写
2014/07/03 职场文书
百年孤独读书笔记
2015/06/29 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏