在vue项目中stylus的安装及使用
Stylus是一个CSS预处理器。
Stylus安装包安装:
dell@DESKTOP-KD0EJ4H MINGW64 /f/gsff-frone
$ cnpm install stylus --save-dev
√ Installed 1 packages
√ Linked 14 latest versions
√ Run 0 scripts
√ All packages installed (7 packages installed from npm registry, used 1s(network 997ms), speed 60.55kB/s, json 15(39.1kB), tarball 21.26kB) dell@DESKTOP-KD0EJ4H MINGW64 /f/gsff-frone
$ cnpm install stylus-loader --save-dev
√ Installed 1 packages
√ Linked 4 latest versions
√ Run 0 scripts
√ All packages installed (3 packages installed from npm registry, used 511ms(network 506ms), speed 42.89kB/s, json 5(21.7kB), tarball 0B)
安装说明:为什么使用 --save-dev
1. --save-dev 是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖。
2. devDependencies 节点下的模块是我们在开发时需要用的,比如本次安装的css预处理器stylus。这些模块在我们的项目部署后是不需要的。
stylus的使用:
1. 在.vue文件里面直接使用,只要在style标签加上lang="stylus"即可:
<style lang="stylus">
$mainCol = #000;
h1 {
color: $mainCol;
}
</style>
2. 引用.styl文件的方式也有两种:
<script>
//引入方法一:
import "@/assets/css/public/common.styl";
</script> <style lang="stylus">
//引入方法二:
@import "../assets/css/public/common.styl"; //这里使用相对路径
}
两者的区别:
(1)在script标签内引入的styl文件,里面的图片路径是相对于当前的.styl文件的
(2)在style 标签引入的.styl文件是相对当前的.vue文件的
3. 具体的语法可参考 张鑫旭的stylus中文版参考文档之综述
4. calc属性使用stylus变量的用法:
$width = 100px;
width: "calc( 100% - %s)" % $width;
5.
如何在vue中全局引入stylus文件的公共变量
在vue项目中stylus的安装及使用的更多相关文章
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- vue 项目中安装npm--save-dev 和 --save 命令
在vue项目中我们常用npm install 安装模块或插件 有两种命令把他们写入到 package.json 文件里面去 例如安装axios 安装到开发环境npm axios --save-dev ...
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
- vue项目中使用iconMoon图标
前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...
- vue入坑教程(二)在vue项目中如何导入element以及sass
在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
随机推荐
- linux之网络
一 什么是网络,网络能干什么 网络出现的主要目的就是实现主机和主机之间的通信,而互联网协议(Internet Protocol Suite)就是连接两台计算机之间的internet一系列统一的标准.互 ...
- C++中栈和队列的基本操作
栈操作: s.push(item) // 将item压入栈中 s.pop() // 删除栈顶元素,不返回值 s.top() // 读取栈顶元素,返回 ...
- Codeforces 1110 简要题解
文章目录 A题 B题 C题 D题 E题 F题 G题 传送门 众所周知ldxoildxoildxoi这种菜鸡选手是不会写HHH题的,因此该篇博客只有AAA题至GGG题的题解,实在抱歉. A题 传送门 题 ...
- Tomcat架构解析(六)-----BIO、NIO、NIO2、APR
对于应用服务器来说,性能是非常重要的,基本可以说决定着这款应用服务器的未来.通常从软件角度来说,应用服务器性能包括如下几个方面: 1.请求处理的并发程度,当前主流服务器均采用异步的方式处理客户端的请求 ...
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效 Jquery 中 $('obj').attr('checked',true)失效的几种解决方案
1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; }) 为什么:attr为失效 ...
- PHP函数gmstrftime()将秒数转换成天时分秒
http://yangjunwei.com/a/930.html PHP函数gmstrftime()将秒数转换成天时分秒 一个应用场景需要用到倒计时的时分秒,比如新浪微博授权有效期剩余: 7天16 ...
- maven学习之一:maven安装
1.下载maven: 地址:https://maven.apache.org/ 点击download后; 解压: 解压后放在d:\develop目录下 下面我们去配置环境变量,找到计算机,右键,找到属 ...
- [小结]了解innodb锁
原创文章,会不定时更新,转发请标明出处:http://www.cnblogs.com/janehoo/p/5603983.html 背景介绍: innodb的锁分两类:lock和latch. 其中la ...
- ibatis.net之我的调整:Update语句的动态set字段
动态Update语句 如果Map中指定多个字段 <update id="UpdateStaff"> update Staff set Name=#Name#,InDat ...
- 分形在遥感和GIS中的应用
GIS等高线化简 遥感图像的追踪 分形matlab实现:分形应用于遥感图像处理 低分辨率和高分辨率图形它们的形状是相似的(图像增强) 贪吃蛇和蚁群算法:试想管中窥豹,一只小蚂蚁 ...