vue中公共CSS配置文件编写与使用

前言

在前端项目中，CSS样式难免有需要大量重复使用的场景，尤其是在不同的页面，比如系统主题色，一样的按钮颜色等等各种使用场景。
在一个文件内，当然可以用同样的class名来解决，但是不同文件又该如何呢，这里我们需要提出共用的CSS样式到项目中共用的文件内，然后将在其他需要使用的文件内引入这个文件，调用即可

CSS公共文件

因为我的系统使用的一般less，css文件也是一样的写法
我会在src文件夹下面建一个这个文件，将我所有的主题色和系统共用的字体和一些按钮的颜色等等放到这个文件内

在文件内部实例代码是这样的

//值的注意的是这里需要写上注解，不然其他使用你这个文件的人看不懂，这里便没有了意义，我这里就不写了
@labelColor: #8d8d8d;
@labelFontSize: 12px;
@NumberColor: #000000;
@NumberFontSize: 18px;
@warnImgWidth:36px;
@warnImgHight:36px;
@warnFontSize:26px;

.icon() {
  width: 28px;
  height: 28px;
  padding-right: 8px;
  box-sizing: content-box;
}

.label() {
  color: @labelColor;
  font-size: @labelFontSize;
}
.number() {
  color: @NumberColor;
  font-size: @NumberFontSize;
}
.topic-list{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  .topic-message{
    width: 47%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 4px;
    img{
      .icon()
    }
    >div{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      // padding-left: 6px;
      span{
        .label()
      }
      b{
        .number() ;
        font-weight: normal;
        display: block;
        width: 100%;
        span{
          .label();
          margin-left: 4px;
        }
      }
    }
  }
}

项目中使用

在需要使用的文件下，import调用进来就可以，类似这样

需要使用上面的样式的时候，直接这样引用就可以了

color: @baseColor;