在vue项目中使用stylus
来源:互联网 发布:mac 无线网卡 编辑:程序博客网 时间:2024/06/10 15:26
前提条件是已经有了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>
stylus的语法,可以去这里看http://www.zhangxinxu.com/jq/stylus/ 张鑫旭写的还是很好的。
阅读全文
0 0
- 在vue项目中使用stylus
- 在vue的开发中使用stylus
- vue中使用stylus
- vue 2.0开发项目中stylus 的配置和使用
- vue-cli项目安装使用stylus步骤
- Vue.js使用Stylus
- vue使用stylus
- 解决vue-cli中stylus无法使用的问题
- 解决vue-cli中stylus无法使用的问题
- 在vue项目中使用jquery
- 在Vue-cli项目中使用echarts
- 在 React、Vue项目中使用 SVG
- 在项目中使用vue过滤器小结
- Vue系列——在vue项目中使用echarts
- Vue系列——在vue项目中使用echarts
- vue-cli中stylus缩进报错
- vue使用stylus报错解决方法
- 用vue构建项目笔记6(在vue中使用vue resource)
- WebStorage 的应用—— sessionStorage
- OpenCV 3计算机视觉:Python语言实现(原书第2版) pdf+项目源代码
- python文件和目录操作方法大全(含实例)
- Python
- python2与python3的区别
- 在vue项目中使用stylus
- linux 系统中的文件权限
- [高斯消元 矩阵的秩] 51Nod 1356 代数数的次数
- LeetCode 646 Maximum Length of Pair Chain(贪心)
- 今天将会是一个新的开始
- PAT 1049数列的片段和
- C++ vector的用法详解
- 手游服务端框架之使用Guava构建缓存系统
- JSP--整合SiteMesh01