vue中css样式的提取与引用

在css的使用中，我们对一些常用、公共的css样式，可以单独提取出来，在用到地方再使用，可以保证一些公共的样式一致性、增强代码的维护性等。

1.新建css样式的文件

新建一个“对象内文本溢出时显示省略号”的样式：ellipsis.styl

ellipsis()
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

新建一个“公共的颜色、字号”的样式：varibles.styl

$bgColor = #00bcd4

2.对样式的使用

在使用的时候，我们需要引入这个文件，
@代表src目录 在css中使用时，需要前面加个~（波浪线）
@import ‘…/…/…/assets/styles/varibles.styl’ 等价于
@import ‘~@/assets/styles/varibles.styl’ 等价于
这里我们也可以对路径起一个别名，需要在webpack.base.conf.js中做出修改（改后需要重启）：

module.exports = {
	resolve: {
	    extensions: ['.js', '.vue', '.json'],
	    alias: {
	      'vue$': 'vue/dist/vue.esm.js',
	      '@': resolve('src'),
	      'styles': resolve('src/assets/styles')
	    }
    }
}

src/assets/styles 起一个别名：styles，之后就可以用这个别名了，
@import ‘~styles/varibles.styl’
在这个文件中，我们还能看到@代表了sre目录。

<style lang="stylus" scoped>
 @import '~styles/varibles.styl'
 @import '~styles/ellipsis.styl'
 .aa {
	background $bgColor
 }
 .bb {
   ellipsis()
 }
</style>

这样子，在样式中我们就可以这么使用了！