webpack-vue全家桶之实现border-1px

举个栗子demo：
//我们做个一个一px的下底边框
app.vue
引入@import “./common/stylus/mixin.styl”

 border-1px(rgba(7, 17, 27, 0.1))

mixin.styl

border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '

base.styl

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

index.styl

@import "./mixin"
@import "./icon"
@import "./base"

main.js

import 'common/stylus/index.styl';

base里面写的媒体查询为了适应不同的分辨率
mixin里面写的都是样式函数为了方便你更改参数
mainjs里面引入的index.styl是将这几个样式文件都注册并加载
大家有没有发现这里app vue 里面引入了一次样式文件，main js里面也引入了，我个人这样理解，main是全局资源的配置和注册，每个文件的需求不同，就分别引入他需要的资源，有些资源是被动的有些是必须要主动引入的比如这个mixin文件就是需要主动引入的