详解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 定义function的三种方式小结
Oct 16 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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
建立文件交换功能的脚本(二)
2006/10/09 PHP
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
PHP中session变量的销毁
2014/02/27 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
浅谈django orm 优化
2018/08/18 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
志愿者活动总结范文
2014/04/26 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
商场广播稿范文
2015/08/19 职场文书
Pandas自定义选项option设置
2021/07/25 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers