stylus在vue中的使用
stylus是一个css预处理器，比较流行的css预处理器有sass、less、stylus，它们都一样，都是css的语法糖，可以使用变量，可以有简单的逻辑，使css的开发效率更高，更易维护。stylus来自node社区，它的语法兼容性强，个人觉得也更加简洁，选择在vue中使用。
安装stylus
以webpack模板为例，在webpack的loader配置中，已经做好了stylus的兼容，build/utils.js中已有对loader的配置，但默认没有stylus包和loader包，需要安装：
cnpm i stylus -D
cnpm i stylus-loader -D因为是预编译嘛，肯定不用-S了。cnpm确实是快…
内部stylus
vue-cli脚手架搭建的项目中用的是.vue文件，文件里面有三个部分，模板（template）、脚本（script）、样式表（style）。
其中的style，声明一下是stylus类型：
<style lang="stylus" rel="stylesheet/stylus"></style>就可以愉快的使用stylus了。
外部stylus
stylus文件后缀为.styl，不是.css，这和sass、less一样，要不然怎么知道用的是stylus语法。
外部建好文件以后，.vue中引入：
import '.styl路径'就可以使用了
stylus语法
css的各预处理器学习门槛都是很低，毕竟只是语法糖。
segmentFault中的详细总结：
https://segmentfault.com/a/1190000002712872
大神的中文翻译手册：
http://www.zhangxinxu.com/jq/stylus/
stylus官方文档：
http://stylus-lang.com/
stylus在vue中的使用相关推荐
- stylus在vue中的安装及使用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一.安装stylus 二.使用步骤 1.使用stylus 2.引用全局样式及配置 总结 前言 之前在项目中经常使用sass ...
- 总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程 文章目录 总结Vue中index.html.main.js.App.vue.index ...
- 在Vue中使用JSX，很easy的
摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...
- Vue中的scoped和scoped穿透
1.什么是scoped 在Vue文件中的style标签上有一个特殊的属性,scoped.当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染 ...
- vue中使用CSS预处理器
常见的stylus.sass.LESS vue中常用的是stylus,因为来源于node.js,与JS关系密切,语法灵活.方便易用.使用stylus可以使用变量.函数.循环来编写CSS样式文件. st ...
- vue中递归组件实现多级列表
一.递归组件的概念 递归组件: 递归组件简单来说在组件内使用组件本身.这个在vue的项目开发中也是比较常见的.对于一些多级的数据嵌套,如果对于每一层数据都进行for循环嵌套,那会非常繁琐,也很不方便. ...
- Vue中 渲染函数（render）的介绍和应用
1. render函数的介绍 简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM. 因为vue是虚拟DOM,所以在拿到template模板时也要 ...
- Vue中的scoped的实现原理以及scoped穿透的用法
本篇文章给大家带来的内容是关于Vue中的scoped的实现原理以及scoped穿透的用法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.什么是scoped 在Vue文件 ...
- 怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
最新文章
- 手工接口测试考虑的点
- eclipse显示服务器地址,eclipse怎样添加服务器地址
- 【jQuery源码】整体架构
- 多线程并发快速处理数据
- GridView实战二：使用ObjectDataSource数据源控件(自定义缓存机制实现Sort)
- 【阿里妈妈数据科学系列】第三篇：离线抽样框架下的AB Test
- 逻辑回归 概率回归_概率规划的多逻辑回归
- 为什么PostgreSQL是最先进的开源数据库
- Tomcat 又爆出高危漏洞！Tomcat 8.5~10 中招…
- None.js 第五步 Buffer(缓冲区)
- 我为什么离开国企，回到互联网内卷？
- 移动端DNUN：危险通知和用户导航
- 一份完整的新媒体活动策划方案
- Linux makefile 教程 非常详细，且易懂
- 我用计算机写作文,教学设计：我用计算机写作文
- 经纬度与墨卡托坐标转化
- 淘宝短视频，为什么搬运的短视频没有流量？从算法角度分析
- 在vue页面监听中如何修改子元素的样式
- 守住一份平淡，宁静坦然，不浮不躁
- M1 Mac使用Kitty script入库标准音源到Kontakt6