详解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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
vue实现购物车选择功能
Jan 10 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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语法检查的方法总结
2019/01/21 PHP
javascript实现的HashMap类代码
2014/06/27 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python实现textrank关键词提取
2018/06/22 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
python logging通过json文件配置的步骤
2020/04/27 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
家庭户外服装:Hawkshead
2017/11/02 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
优秀部门获奖感言
2014/02/14 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
调解协议书
2014/04/16 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
干部考核工作总结
2015/08/12 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
mysql sock文件存储了什么信息
2022/07/15 MySQL