Skip to content

Commit 892b0ce

Browse files
linxsboxhzsrc
linxsbox
authored and
hzsrc
committed
Chore: replace node-sass with dart-sass (ElemeFE#21019)
* chore: 移除 node-sass 替换为 sass 进行构建 - 更新调用库 gulp-sass 更新为 gulp-dart-sass 以支持 sass - 更新 scss 使用语法旧语法已被废弃 * chore: add yarn lock
1 parent 48c3296 commit 892b0ce

File tree

13 files changed

+2705
-2539
lines changed

13 files changed

+2705
-2539
lines changed

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
"gulp": "^4.0.0",
103103
"gulp-autoprefixer": "^6.0.0",
104104
"gulp-cssmin": "^0.2.0",
105-
"gulp-sass": "^4.0.2",
105+
"gulp-dart-sass": "^1.0.2",
106106
"highlight.js": "^9.3.0",
107107
"html-webpack-plugin": "^3.2.0",
108108
"json-loader": "^0.5.7",
@@ -121,12 +121,12 @@
121121
"markdown-it-container": "^2.0.0",
122122
"mini-css-extract-plugin": "^0.4.1",
123123
"mocha": "^6.0.2",
124-
"node-sass": "^4.11.0",
125124
"optimize-css-assets-webpack-plugin": "^5.0.1",
126125
"postcss": "^7.0.14",
127126
"progress-bar-webpack-plugin": "^1.11.0",
128127
"rimraf": "^2.5.4",
129-
"sass-loader": "^7.1.0",
128+
"sass": "^1.34.0",
129+
"sass-loader": "^10.1.1",
130130
"select-version-cli": "^0.0.2",
131131
"sinon": "^7.2.7",
132132
"sinon-chai": "^3.3.0",

‎packages/theme-chalk/gulpfile.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
'use strict';
22

33
const { series, src, dest } = require('gulp');
4-
const sass = require('gulp-sass');
4+
const sass = require('gulp-dart-sass');
55
const autoprefixer = require('gulp-autoprefixer');
66
const cssmin = require('gulp-cssmin');
77

88
function compile() {
99
return src('./src/*.scss')
10-
.pipe(sass.sync())
10+
.pipe(sass.sync().on('error', sass.logError))
1111
.pipe(autoprefixer({
12-
browsers: ['ie > 9', 'last 2 versions'],
12+
overrideBrowserslist: ['ie > 9', 'last 2 versions'],
1313
cascade: false
1414
}))
1515
.pipe(cssmin())

‎packages/theme-chalk/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"devDependencies": {
2929
"gulp": "^3.9.1",
3030
"gulp-cssmin": "^0.1.7",
31-
"gulp-sass": "^3.1.0",
31+
"gulp-dart-sass": "^1.0.2",
3232
"gulp-autoprefixer": "^4.0.0"
3333
},
3434
"dependencies": {}

‎packages/theme-chalk/src/badge.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:math";
12
@import "mixins/mixins";
23
@import "common/var";
34

@@ -22,7 +23,7 @@
2223
@include when(fixed) {
2324
position: absolute;
2425
top: 0;
25-
right: #{1 + $--badge-size / 2};
26+
right: #{1 + math.div($--badge-size, 2)};
2627
transform: translateY(-50%) translateX(100%);
2728

2829
@include when(dot) {

‎packages/theme-chalk/src/carousel.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:math";
12
@import "mixins/mixins";
23
@import "common/var";
34

@@ -122,7 +123,7 @@
122123
padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
123124
.el-carousel__button {
124125
width: $--carousel-indicator-height;
125-
height: #{$--carousel-indicator-width / 2};
126+
height: #{math.div($--carousel-indicator-width, 2)};
126127
}
127128
}
128129

‎packages/theme-chalk/src/col.scss

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:math";
12
@import "./common/var.scss";
23
@import "./mixins/mixins.scss";
34

@@ -12,21 +13,21 @@
1213

1314
@for $i from 0 through 24 {
1415
.el-col-#{$i} {
15-
width: (1 / 24 * $i * 100) * 1%;
16+
width: (math.div(1 , 24) * $i * 100) * 1%;
1617
}
1718

1819
.el-col-offset-#{$i} {
19-
margin-left: (1 / 24 * $i * 100) * 1%;
20+
margin-left: (math.div(1 , 24) * $i * 100) * 1%;
2021
}
2122

2223
.el-col-pull-#{$i} {
2324
position: relative;
24-
right: (1 / 24 * $i * 100) * 1%;
25+
right: (math.div(1 , 24) * $i * 100) * 1%;
2526
}
2627

2728
.el-col-push-#{$i} {
2829
position: relative;
29-
left: (1 / 24 * $i * 100) * 1%;
30+
left: (math.div(1 , 24) * $i * 100) * 1%;
3031
}
3132
}
3233

@@ -36,21 +37,21 @@
3637
}
3738
@for $i from 0 through 24 {
3839
.el-col-xs-#{$i} {
39-
width: (1 / 24 * $i * 100) * 1%;
40+
width: (math.div(1 , 24) * $i * 100) * 1%;
4041
}
4142

4243
.el-col-xs-offset-#{$i} {
43-
margin-left: (1 / 24 * $i * 100) * 1%;
44+
margin-left: (math.div(1 , 24) * $i * 100) * 1%;
4445
}
4546

4647
.el-col-xs-pull-#{$i} {
4748
position: relative;
48-
right: (1 / 24 * $i * 100) * 1%;
49+
right: (math.div(1 , 24) * $i * 100) * 1%;
4950
}
5051

5152
.el-col-xs-push-#{$i} {
5253
position: relative;
53-
left: (1 / 24 * $i * 100) * 1%;
54+
left: (math.div(1 , 24) * $i * 100) * 1%;
5455
}
5556
}
5657
}
@@ -61,21 +62,21 @@
6162
}
6263
@for $i from 0 through 24 {
6364
.el-col-sm-#{$i} {
64-
width: (1 / 24 * $i * 100) * 1%;
65+
width: (math.div(1 , 24) * $i * 100) * 1%;
6566
}
6667

6768
.el-col-sm-offset-#{$i} {
68-
margin-left: (1 / 24 * $i * 100) * 1%;
69+
margin-left: (math.div(1 , 24) * $i * 100) * 1%;
6970
}
7071

7172
.el-col-sm-pull-#{$i} {
7273
position: relative;
73-
right: (1 / 24 * $i * 100) * 1%;
74+
right: (math.div(1 , 24) * $i * 100) * 1%;
7475
}
7576

7677
.el-col-sm-push-#{$i} {
7778
position: relative;
78-
left: (1 / 24 * $i * 100) * 1%;
79+
left: (math.div(1 , 24) * $i * 100) * 1%;
7980
}
8081
}
8182
}
@@ -86,21 +87,21 @@
8687
}
8788
@for $i from 0 through 24 {
8889
.el-col-md-#{$i} {
89-
width: (1 / 24 * $i * 100) * 1%;
90+
width: (math.div(1 , 24) * $i * 100) * 1%;
9091
}
9192

9293
.el-col-md-offset-#{$i} {
93-
margin-left: (1 / 24 * $i * 100) * 1%;
94+
margin-left: (math.div(1 , 24) * $i * 100) * 1%;
9495
}
9596

9697
.el-col-md-pull-#{$i} {
9798
position: relative;
98-
right: (1 / 24 * $i * 100) * 1%;
99+
right: (math.div(1 , 24) * $i * 100) * 1%;
99100
}
100101

101102
.el-col-md-push-#{$i} {
102103
position: relative;
103-
left: (1 / 24 * $i * 100) * 1%;
104+
left: (math.div(1 , 24) * $i * 100) * 1%;
104105
}
105106
}
106107
}
@@ -111,21 +112,21 @@
111112
}
112113
@for $i from 0 through 24 {
113114
.el-col-lg-#{$i} {
114-
width: (1 / 24 * $i * 100) * 1%;
115+
width: (math.div(1 , 24) * $i * 100) * 1%;
115116
}
116117

117118
.el-col-lg-offset-#{$i} {
118-
margin-left: (1 / 24 * $i * 100) * 1%;
119+
margin-left: (math.div(1 , 24) * $i * 100) * 1%;
119120
}
120121

121122
.el-col-lg-pull-#{$i} {
122123
position: relative;
123-
right: (1 / 24 * $i * 100) * 1%;
124+
right: (math.div(1 , 24) * $i * 100) * 1%;
124125
}
125126

126127
.el-col-lg-push-#{$i} {
127128
position: relative;
128-
left: (1 / 24 * $i * 100) * 1%;
129+
left: (math.div(1 , 24) * $i * 100) * 1%;
129130
}
130131
}
131132
}
@@ -136,21 +137,21 @@
136137
}
137138
@for $i from 0 through 24 {
138139
.el-col-xl-#{$i} {
139-
width: (1 / 24 * $i * 100) * 1%;
140+
width: (math.div(1 , 24) * $i * 100) * 1%;
140141
}
141142

142143
.el-col-xl-offset-#{$i} {
143-
margin-left: (1 / 24 * $i * 100) * 1%;
144+
margin-left: (math.div(1 , 24) * $i * 100) * 1%;
144145
}
145146

146147
.el-col-xl-pull-#{$i} {
147148
position: relative;
148-
right: (1 / 24 * $i * 100) * 1%;
149+
right: (math.div(1 , 24) * $i * 100) * 1%;
149150
}
150151

151152
.el-col-xl-push-#{$i} {
152153
position: relative;
153-
left: (1 / 24 * $i * 100) * 1%;
154+
left: (math.div(1 , 24) * $i * 100) * 1%;
154155
}
155156
}
156157
}

‎packages/theme-chalk/src/common/var.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:math";
12
/* Element Chalk Variables */
23

34
// Special comment for theme configurator
@@ -486,7 +487,7 @@ $--cascader-tag-background: #f0f2f5;
486487

487488
/* Group
488489
-------------------------- */
489-
$--group-option-flex: 0 0 (1/5) * 100% !default;
490+
$--group-option-flex: 0 0 math.div(1, 5) * 100% !default;
490491
$--group-option-offset-bottom: 12px !default;
491492
$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
492493
$--group-title-color: $--color-black !default;

‎packages/theme-chalk/src/input-number.scss

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:math";
12
@import "mixins/mixins";
23
@import "common/var";
34
@import "input";
@@ -137,7 +138,7 @@
137138

138139
@include e((increase, decrease)) {
139140
height: auto;
140-
line-height: #{($--input-height - 2) / 2};
141+
line-height: #{math.div($--input-height - 2, 2)};
141142

142143
[class*=el-icon] {
143144
transform: scale(.8);
@@ -161,19 +162,19 @@
161162

162163
&[class*=medium] {
163164
[class*=increase], [class*=decrease] {
164-
line-height: #{($--input-medium-height - 2) / 2};
165+
line-height: #{math.div($--input-medium-height - 2, 2)};
165166
}
166167
}
167168

168169
&[class*=small] {
169170
[class*=increase], [class*=decrease] {
170-
line-height: #{($--input-small-height - 2) / 2};
171+
line-height: #{math.div($--input-small-height - 2, 2)};
171172
}
172173
}
173174

174175
&[class*=mini] {
175176
[class*=increase], [class*=decrease] {
176-
line-height: #{($--input-mini-height - 2) / 2};
177+
line-height: #{math.div($--input-mini-height - 2, 2)};
177178
}
178179
}
179180
}

‎packages/theme-chalk/src/loading.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:math";
12
@import "mixins/mixins";
23
@import "common/var";
34

@@ -26,7 +27,7 @@
2627
position: fixed;
2728

2829
.el-loading-spinner {
29-
margin-top: #{- $--loading-fullscreen-spinner-size / 2};
30+
margin-top: #{math.div(-$--loading-fullscreen-spinner-size, 2)};
3031

3132
.circular {
3233
height: $--loading-fullscreen-spinner-size;
@@ -38,7 +39,7 @@
3839

3940
@include b(loading-spinner) {
4041
top: 50%;
41-
margin-top: #{- $--loading-spinner-size / 2};
42+
margin-top: #{math.div(-$--loading-spinner-size, 2)};
4243
width: 100%;
4344
text-align: center;
4445
position: absolute;

‎packages/theme-chalk/src/mixins/mixins.scss

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,17 @@
66
@mixin res($key, $map: $--breakpoints) {
77
// 循环断点Map，如果存在则返回
88
@if map-has-key($map, $key) {
9-
@media only screen and #{inspect(map-get($map, $key))} {
10-
@content;
9+
@if $key=='sm-only'or $key=='md-only'or $key=='lg-only' {
10+
// 判定特定定义处理字符串参数值问题
11+
@media only screen and #{unquote(map-get($map, $key))} {
12+
@content;
13+
}
14+
}
15+
16+
@else {
17+
@media only screen and #{inspect(map-get($map, $key))} {
18+
@content;
19+
}
1120
}
1221
} @else {
1322
@warn "Undefeined points: `#{$map}`";

0 commit comments

Comments
 (0)