vue 2.0开发项目中stylus 的配置和使用

来源:互联网 发布:tower mac 注册码 编辑:程序博客网 时间:2024/06/05 10:54

其实,之前一直都是css 写样式 的。但是到了vue2.0时代,似乎得换个方式了,看到得教程也都是用stylus,既然可以定义css变量和函数,感觉很牛掰啊!所有也就上手试试。

首先是安装 ,在node环境下执行 npm install stylus stylus-loader --save
自己检查package.json 里面是否安装成功。

其次,就可以在项目中定义变量了:比如新建一个 mycolor.styl 得文档,

// 颜色定义规范$color-background = #222$color-background-d = rgba(0, 0, 0, 0.3)$color-highlight-background = #333

接着就是在vue 文档中 的引用。需要主意 的是必须注明你的lang类型,不然就会编译时报错。

<style scoped lang="stylus" rel="stylesheet/stylus">  @import "~common/stylus/mycolor.styl" #teststyl h3    color $color-theme</style>

好了,就是这么简单。

原创粉丝点击