详解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 相关文章推荐
jquery 简单导航实现代码
Sep 11 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
小程序实现五星点评效果
Nov 03 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 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中如何实现常用邮箱的基本判断
2014/01/07 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php生成二维码
2015/08/10 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
jquery插件之easing使用
2010/08/19 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
python同步windows和linux文件
2019/08/29 Python
python开发前景如何
2020/06/11 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Python爬取梨视频的示例
2021/01/29 Python
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
捐助倡议书范文
2014/04/15 职场文书
2016公司年会通知范文
2015/04/25 职场文书
建党伟业观后感
2015/06/01 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python