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>

来源：https://my.oschina.net/lzyoo/blog/3136005