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

WEB前端 waitig 694℃ 百度已收录 0评论

其实,之前一直都是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>

好了,就是这么简单。


本文由【waitig】发表在等英博客
本文固定链接:vue 2.0开发项目中stylus 的配置和使用
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)