refactor: upgrade sass

Signed-off-by: csonchen <cson_chensheng@163.com>
xsky-fe · Jul 13, 2023 · f210788 · f210788
1 parent d7028ce
commit f210788
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 291 deletions.
diff --git a/package.json b/package.json
@@ -47,8 +47,8 @@
     "build-lib": "rm -rf lib && cross-env NODE_ENV=production babel src --out-dir lib --extensions '.ts,.tsx' --env-name 'lib' && npm run lib-css",
     "build-dist": "rm -rf dist && cross-env NODE_ENV=production webpack",
     "dist-stats": "cross-env NODE_ENV=production webpack --profile --json > stats.json",
-    "esm-css": "node-sass --precision=8 src -o esm -q --output-style=compressed --source-map=true",
-    "lib-css": "node-sass --precision=8 src -o lib -q --output-style=compressed --source-map=true",
+    "esm-css": "sass src esm --quiet --style=compressed --no-source-map",
+    "lib-css": "sass src lib --quiet --style=compressed --no-source-map",
     "esm-types": "rm -rf types && tsc --declaration -p ./ -t es2015 --emitDeclarationOnly --outDir esm/types",
     "tsc-types": "rm -rf types && tsc --declaration -p ./ -t es2015 --emitDeclarationOnly --outDir types",
     "copy": "ts-node scripts/build-copy.ts",
@@ -104,7 +104,6 @@
     "lodash": "^4.17.11",
     "lodash-webpack-plugin": "^0.11.5",
     "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^6.0.1",
     "nodemon": "^2.0.22",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "6.2.1",
@@ -113,6 +112,7 @@
     "raw-loader": "^2.0.0",
     "react-test-renderer": "^16.8.6",
     "release-it": "^13.5.6",
+    "sass": "^1.63.6",
     "sass-loader": "^10.0.1",
     "storybook": "7.0.18",
     "terser-webpack-plugin": "^1.3.0",

diff --git a/src/components/Badge/style.scss b/src/components/Badge/style.scss
@@ -7,7 +7,7 @@
     margin: 0 5px;
     color: $white;
     display: inline-block;
-    border-radius: $badge-height / 2;
+    border-radius: calc($badge-height / 2);
     height: $badge-height;
     min-width: $badge-height;
     text-align: center;
@@ -26,7 +26,7 @@
       width: $badge-dot-small-size;
       height: $badge-dot-small-size;
       margin-right: $badge-dot-small-size;
-      border-radius: $badge-dot-small-size / 2;
+      border-radius: calc($badge-dot-small-size / 2);
     }
     &.middle {
       width: $badge-dot-small-size * 2;
@@ -72,20 +72,20 @@
   & > .Badge__count{
     position: absolute;
     transform: translateX(-50%);
-    top: $badge-height / (-2);
+    top: calc($badge-height / (-2));
     font-size: $font-size-12;
   }
   & > .Badge__dot {
     position: absolute;
     transform: translateX(-50%);
     &.small {
-      top: $badge-dot-small-size / (-2);
+      top: calc($badge-dot-small-size / (-2));
     }
     &.middle {
-      top: $badge-dot-small-size * (-1);
+      top: calc($badge-dot-small-size * (-1));
     }
     &.large {
-       top: $badge-dot-small-size * (-1.5);
+       top: calc($badge-dot-small-size * (-1.5));
     }
   }
 }

diff --git a/src/components/Tabs/style.scss b/src/components/Tabs/style.scss
@@ -114,7 +114,7 @@
     border-radius: $radius-4-tab;
     height: calc(100% - 40px);
     .panel-heading {
-      font: $font-size-16/20px $pingfang-font;
+      font: calc($font-size-16 / 20px) $pingfang-font;
       background-color: $white;
       border: none;
     }

diff --git a/src/components/UsageBar/style.scss b/src/components/UsageBar/style.scss
@@ -6,7 +6,7 @@
   .progress {
     margin-bottom: 0;
     height: $progress-height;
-    border-radius: $progress-height / 2;
+    border-radius: calc($progress-height / 2);
     box-shadow: inset 0 1px 2px rgba($black, 0.1);
   }
   &.inline {
@@ -56,7 +56,7 @@
           width: 8px;
           height: $progress-legend-height;
           margin-right: 4px;
-          border-radius: $progress-legend-height / 2;
+          border-radius: calc($progress-legend-height / 2);
           background-color: $primary-normal;
         }
       }