svg 设置的宽高被覆盖

在做页面时，发现设置的svg的宽高被覆盖，svg特别的小

此时，由于提前设置了Icon.module.scss

.icon{
  width: 1.2em;
  height: 1.2em
}

StartPage.module.scss

.pot{
  width: 128px;
  height: 128px;
  
  &_wrapper {
    padding: 120px 0;
  }
}

发现给pot设置的宽高并没有生效，而是被覆盖了

分析得出： 因为修改的是.icon的样式，这个class是所有图标通用的，而这个小猪独有的class的在StartPage.nodule.scss里面

可以看出由于优先级不高，导致设置的宽高被覆盖了。

解决的方法有两个：

第一：最粗暴的就是加个 !important

第二： 就是提高css选择器的优先级，但是下面的&_wrapper就要抽离出来

优先级和css引入的顺序也有关系，同等权重的选择器，越靠后被解析到的css优先级越高，这种和import、css书写等有关系，常规还是通过增加选择器的权重避免这些。

参考文档