21°

Vue 之Stylus使用

一、什么是Stylus

CSS预处理器有Sass、LESS 和 Stylus,其中Stylus是来源于Node.js社区,与js关系密切,所以基于Vue.js的开发,我们选择使用Stylus。

二、配置环境

npm install stylus --save-dev -g// 预处理css

npm install stylus-loader --save-dev-g // webpack识别stylus

或者

npm install stylus stylus-loader --save-dev -g 

三、使用Stylus

  • webstrom配置

  • src/assets下添加 base.styl文件
.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;

Vue文件中引用

import './assets/base.styl'
<h2 class="top">this app.vue</h2>

本文由【l】发布于开源中国,原文链接:https://my.oschina.net/lzyoo/blog/3136005

全部评论: 0

    我有话说: