详解vue中引入stylus及报错解决方法
前提条件是已经有了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>
常常会报错如下:
此时不仅仅需要npm install stylus-loader.还需要npm install stylus 。然后在packge.json文件中写入
此时,stylus文件就可用了,项目就可以正常运行了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
解决vue-cli中stylus无法使用的问题方法
在写基于vue-cli的vue项目时,遇到一个小坑,css用了stylus,但是在编译时候总是报错: 来来回回折腾了数十次,终于被我折腾好了...解决方式如下: 1.在package.json文件中写入依赖: "stylus-loader": "^2.5.0", "stylus": "0.52.4", 然后在命令行运行cmpm i 安装插件. 或者直接运行: $ cnpm i stylus-loader stylus --sa
-
详解vue中引入stylus及报错解决方法
前提条件是已经有了vue项目,如果没有,请先建立,具体方法看这里https://cn.vuejs.org/v2/guide/installation.html 安装stylus 好了,建立好项目后我们来安装stylus npm install stylus stylus-loader --save-dev 这样就安装上了stylus. 接下来就可以使用了,使用方式分两种.一种是在.vue文件的style块中使用,一种是引用.styl文件的形式 在.vue文件的style块中使用 这个很简单,只要
-
详解Vue.js v-for不支持IE9的解决方法
最近一个小项目,在最后的测试阶段出现了问题,使用了Vue,在Chrome.Firefox.Safari.IE11下都可以访问,唯独IE9下无法正常显示,排除程序问题后,最终判断是Vue的锅,替换版本后解决.经过测试,2.16.2.17 在IE9下无法使用 v-for 导致的. 写了一个简单的demo,在IE9下无法显示列表,运行结果如下: 测试代码如下: <!DOCTYPE html> <html lang=zh-CN> <head> <meta charset=
-
详解JavaScript中精度失准问题及解决方法
首先来看一下JavaScript中的数字类型的存储情况 ①JS中所有的数字(小数.整型)都是浮点型 ②JS中小数.整型都是Number类型 ③JS中Number类型使用binary64或双精度表示的,实质是一个二进制格式64位的浮点数 ④64位的二进制具体为最高的1位是符号位,接着的11位是指数,剩下的52位为有效数字 ⑤符号位决定了一个数的正负,指数部分决定了数值的大小,小数部分决定了数值的精度,因此,JavaScript提供的有效 数字最长为53个二进制位(64位浮点的后52位+有效数字第一
-
关于vue中使用three.js报错的解决方法
目录 前言 1.vue的问题? 2.Proxy的异常情况 3.Three.js的问题 4.defineProperty异常情况 5.解决 总结 前言 最近在学习three.js,同时也学习一下vue3,然后就出现问题了,报错直接用不了,错误信息如下: Uncaught TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the prox
-
详解Vue项目引入CreateJS的方法(亲测可用)
1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS
-
详解Vue中的MVVM原理和实现方法
下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi
-
详解vue中v-model和v-bind绑定数据的异同
vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data
-
详解Vue中Axios封装API接口的思路及方法
一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个
-
vue component 中引入less文件报错 Module build failed
错误是这样发生的: //在vue component组件中引入less文件 <style lang="less"> @import '@/assets/css/public/layout.less'; </style> 然后就报错了: Module build failed: @import '@/assets/css/public/layout.less'; ^ Can't resolve './@/assets/css/public/layout.less'
-
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题.就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象. 重点:事件写到父元素上才行!!! 0.0 下面写下我的实现方法和实现效果 样式代码: <div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="
随机推荐
- 用vbs列出注册表中 Run 项中的所有项目
- KVM虚拟化技术之virt-manager使用及KVM虚拟化平台网络模型介绍
- centos7下NFS使用与配置的步骤
- 简单了解Java编程中对异常处理的运用
- 网页整体变灰白色(兼容各浏览器)实例
- jQuery获取地址栏参数插件(模仿C#)
- ASP.NET中在一般处理程序中使用session的简单介绍
- Laravel中注册Facades的步骤详解
- 使用JavaScript实现弹出层效果的简单实例
- 使用grappelli为django admin后台添加模板
- Python对象体系深入分析
- 选择与取消选择不错的应用 js
- nginx connect() to unix:/var/run/php-fpm.sock failed (11: Resource temporarily unavailable)
- SQL2005CLR函数扩展-解析天气服务的实现
- jquery鼠标放上去显示悬浮层即弹出定位的div层
- jQuery实现二维码扫描功能
- javascript预加载图片、css、js的方法示例介绍
- 没有ISAPI Rewrite FULL照样玩多站点伪静态的方法分享
- Android自定义控件属性详细介绍
- Android使用Sensor感应器实现线程中刷新UI创建android测力计的功能