VUE-引用通用样式属性的方法

• 需求描述：

header.vue页面需要把背景色设置成统一的颜色 #00bcd4，这个颜色在整个项目中被多次使用，这时候可以在src\assets\styles\下新建一个通用样式属性文件varibles.styl，所有通用的样式均可以放在这里按需取用

• 实现步骤：

1、在src\assets\styles\下新建一个通用样式属性文件varibles.styl

2、header.vue页面引用背景色属性，注意：import时一定要加~

    <style lang="stylus" scoped>
	  @import '~@/assets/styles/varibles.styl'
	  .header
	    display: flex
	    background: $bgColor
	    color: #fff

3、varibles.styl 在多个地方使用，如果觉得路径过长，可以给路径起个别名，在build\webpack.base.conf.js 中的resolve中进行设置：

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

4、设置好之后，header.vue页面改写成如下即可

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header
    display: flex
    background: $bgColor
    color: #fff

5、通用样式中也可以是个方法，如 mixins.styl  设置字符省略号功能

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

6、引用

@import '~styles/mixins.styl'
 
.icon-desc
        ...
        ellipsis() //文字缩略展示的方法，需要先引用