fix: fix less-loader options and styles

1. Fix the options of less-loader to match customized themes
2. Fix some color to variable style in tab detail to get better extension

Change-Id: I9cfaf09a72ede2e3db36176c256bbe307f4e5d0b

config/webpack.dev.js

@@ -109,6 +109,7 @@ module.exports = (env) => {
               options: {
                 importLoaders: true,
                 javascriptEnabled: true,
+                modifyVars: theme,
               },
             },
           ],

config/webpack.e2e.js

@@ -97,6 +97,7 @@ module.exports = (env) => {
               options: {
                 importLoaders: true,
                 javascriptEnabled: true,
+                modifyVars: theme,
               },
             },
           ],

config/webpack.prod.js

@@ -86,6 +86,7 @@ module.exports = (env) => {
               options: {
                 importLoaders: true,
                 javascriptEnabled: true,
+                modifyVars: theme,
               },
             },
           ],

src/containers/TabDetail/index.less

@@ -74,7 +74,7 @@
   padding-right: @body-padding;
   padding-bottom: 30px;
   padding-left: @body-padding;
-  background-color: #fff;
+  background-color: @white;
 
   :global {
     .ant-descriptions-title {
@@ -134,7 +134,7 @@
   :global {
     .ant-btn-link {
       padding: 5.6px 15px !important;
-      border-color: #0068ff;
+      border-color: @primary-color;
     }
 
     .ant-divider-vertical {
@@ -142,9 +142,9 @@
     }
 
     .ant-btn-dangerous {
-      color: #c4233e;
+      color: @danger-color;
       background: transparent;
-      border-color: #c4233e;
+      border-color: @danger-color;
     }
 
     .ant-btn-link[disabled],
@@ -155,16 +155,16 @@
     }
 
     .ant-btn-dangerous.ant-btn-link:active {
-      color: #c4233e;
+      color: @danger-color;
       background: transparent;
-      border-color: #c4233e;
+      border-color: @danger-color;
     }
 
     .ant-btn-dangerous:hover,
     .ant-btn-dangerous:focus {
-      color: #f76070;
-      background: #fff;
-      border-color: #f76070;
+      color: @danger-color-hover;
+      background: @white;
+      border-color: @danger-color-hover;
     }
   }
 }

src/styles/variables.less

@@ -20,6 +20,8 @@
 @red-2: rgba(235, 53, 77, 65%);
 @red-3: rgba(235, 53, 77, 35%);
 @error-color: @red-1;
+@danger-color: #c4233e;
+@danger-color-hover: #f76070;
 
 @gray-1: #d2d2d2;
 @gray-2: #f2f2f2;