打包后样式丢失问题解决

Author: baimingxuan

src/assets/less/reset.less

@@ -1,12 +1,12 @@
 /* el-button禁用相关样式 */
 .el-button {
   &.is-disabled {
-    cursor: default;
+    cursor: default!important;
   }
   &.is-disabled {
     &:focus,
     &:hover {
-      cursor: default;
+      cursor: default!important;
     }
   }
 }

src/components/BreadCrumbs/index.vue

@@ -64,7 +64,7 @@ export default {
     .icon {
       font-weight: bold;
       font-size: 14px;
-      color: #333;
+      color: #333!important;
     }
     &:hover {
       color: #409eff;

src/layout/components/TagsView/TagItem.vue

@@ -24,31 +24,31 @@ export default {
 </script>
 
 <style lang="less">
-  .tag-item-wrapper {
+.tag-item-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+  height: 32px!important;
+  margin: 4px 2px!important;
+  padding: 0 10px!important;
+  border-radius: 3px!important;
+  line-height: 32px!important;
+  border: 1px solid #e8eaec!important;
+  color: #555!important;
+  background: #fff!important;
+  overflow: hidden;
+  cursor: pointer;
+  .tag-item-dot {
     display: inline-block;
-    vertical-align: middle;
-    height: 32px;
-    margin: 4px 2px;
-    padding: 0 10px;
-    border-radius: 3px;
-    line-height: 32px;
-    border: 1px solid #e8eaec;
-    color: #555;
-    background: #fff;
-    overflow: hidden;
-    cursor: pointer;
+    width: 10px;
+    height: 10px;
+    margin-right: 6px;
+    border-radius: 50%;
+    background: #e8eaec;
+  }
+  &.active {
     .tag-item-dot {
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      margin-right: 6px;
-      border-radius: 50%;
-      background: #e8eaec;
-    }
-    &.active {
-      .tag-item-dot {
-        background: #409eff;
-      }
+      background: #409eff;
     }
   }
+}
 </style>

src/layout/components/TagsView/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tags-nav clear-fix">
+  <div class="tags-nav-wrapper clear-fix">
     <el-button type="text" class="btn-con" @click="handleMove(240)">
       <i class="icon el-icon-arrow-left"></i>
     </el-button>
@@ -185,43 +185,43 @@ export default {
 </script>
 
 <style lang="less">
-  .tags-nav {
-    width: 100%;
+.tags-nav-wrapper {
+  width: 100%;
+  height: 40px;
+  .icon {
+    font-size: 18px;
+  }
+  .btn-con {
+    float: left;
+    width: 28px;
     height: 40px;
-    .icon {
-      font-size: 18px;
-    }
-    .btn-con {
-      float: left;
-      width: 28px;
-      height: 40px;
-      padding: 8px 7px 8px 3px;
-      border-top: solid 1px #f0f0f0;
-      border-bottom: solid 1px #f0f0f0;
-      box-sizing: border-box;
-    }
-    .btn-close {
-      width: 40px;
-      padding-top: 10px;
-      padding-left: 11px;
-      border-left: solid 1px #f0f0f0;
-      cursor: pointer;
-    }
-    .tags-views {
-      position: relative;
-      float: left;
-      width: calc(100% - 96px);
-      height: 40px;
-      background: #f0f0f0;
-      box-shadow: inset 0 0 3px 2px #6464641a;
-      overflow: hidden;
-      .tags-cont {
-        position: absolute;
-        padding: 0 4px;
-        overflow: visible;
-        white-space: nowrap;
-        transition: left .5s ease;
-      }
+    padding: 8px 7px 8px 3px;
+    border-top: solid 1px #f0f0f0;
+    border-bottom: solid 1px #f0f0f0;
+    box-sizing: border-box;
+  }
+  .btn-close {
+    width: 40px;
+    padding-top: 10px;
+    padding-left: 11px;
+    border-left: solid 1px #f0f0f0;
+    cursor: pointer;
+  }
+  .tags-views {
+    position: relative;
+    float: left;
+    width: calc(100% - 96px);
+    height: 40px;
+    background: #f0f0f0;
+    box-shadow: inset 0 0 3px 2px #6464641a;
+    overflow: hidden;
+    .tags-cont {
+      position: absolute;
+      padding: 0 4px;
+      overflow: visible;
+      white-space: nowrap;
+      transition: left .5s ease;
     }
   }
+}
 </style>