Skip to content

Commit 2fec8d1

Browse files
mengxinssfdmengxinssfd
committed
refactor: 重构打包过程，js与css代码分离，不再打包在一起
1 parent 5fd116a commit 2fec8d1

File tree

17 files changed

+270
-260
lines changed

17 files changed

+270
-260
lines changed

‎internal/playground/src/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import { RouterProvider } from 'react-router-dom';
44
import './index.css';
5+
import '@pkg/components/index.scss';
56
import { router } from './router';
67
// import reportWebVitals from './reportWebVitals';
78

‎packages/components/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"rm:dist": "rimraf ./dist",
88
"build:this": "tsc -p tsconfig.json",
99
"build": "pnpm rm:dist && pnpm build:this",
10-
"check:ts": "tsc --noEmit -p tsconfig.json"
10+
"check:ts": "tsc --noEmit -p tsconfig.json",
11+
"build:scss": "sass src/index.scss dist/index.css --no-source-map"
1112
}
1213
}

‎packages/components/src/button/Button.module.scss‎

Lines changed: 0 additions & 187 deletions
This file was deleted.

‎packages/components/src/button/Button.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
getComponentClass,
88
} from '@pkg/shared';
99
import { getClassNames } from '@tool-pack/basic';
10-
import './Button.module.scss';
1110

1211
const cClass = getComponentClass('button');
1312

‎packages/components/src/button/index.scss‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
@import '../scss.variable';
2+
3+
.#{$PREFIX}button {
4+
--t-btn-main-color: var(--t-text-color);
5+
--t-btn-color: white;
6+
--t-btn-bg-color: unset;
7+
--t-btn-border-style: solid;
8+
--t-btn-border-color: unset;
9+
--t-btn-border-width: 0;
10+
--t-btn-radius: var(--t-redis);
11+
--t-btn-padding: 16px;
12+
13+
--t-btn-hover-color: white;
14+
--t-btn-hover-border-color: var(--t-btn-hover-color);
15+
--t-btn-hover-bg-color: unset;
16+
17+
--t-btn-danger-color: red;
18+
--t-btn-danger-hover-color: #ff7875;
19+
20+
position: relative;
21+
border-radius: var(--t-btn-radius);
22+
padding: 0 var(--t-btn-padding);
23+
height: var(--t-size);
24+
font-size: 1em;
25+
font-weight: 400;
26+
outline: 0;
27+
cursor: pointer;
28+
border: var(--t-btn-border-width) var(--t-btn-border-style)
29+
var(--t-btn-border-color);
30+
background-color: var(--t-btn-bg-color);
31+
color: var(--t-btn-color);
32+
transition-property: background-color, width, height, color, padding-top,
33+
padding-left, padding-right, padding-bottom;
34+
//transition-property: all;
35+
transition-timing-function: ease-in-out;
36+
transition-duration: var(--t-transition-duration);
37+
38+
&:not([disabled]):hover {
39+
--t-btn-color: var(--t-btn-hover-color);
40+
--t-btn-bg-color: var(--t-btn-hover-bg-color);
41+
--t-btn-border-color: var(--t-btn-hover-border-color);
42+
}
43+
44+
&[disabled] {
45+
cursor: not-allowed;
46+
}
47+
&.type-primary {
48+
--t-btn-main-color: var(--t-primary-bg-color);
49+
--t-btn-bg-color: var(--t-primary-bg-color);
50+
--t-btn-hover-bg-color: var(--t-primary-hover-bg-color);
51+
&[disabled] {
52+
--t-btn-bg-color: var(--t-primary-disabled-bg-color);
53+
}
54+
}
55+
&.type-success {
56+
--t-btn-main-color: #67c23a;
57+
--t-btn-bg-color: #67c23a;
58+
--t-btn-hover-bg-color: #a9ea89;
59+
&[disabled] {
60+
--t-btn-bg-color: #c5f6ac;
61+
}
62+
}
63+
&.type-warning {
64+
--t-btn-main-color: #e6a23c;
65+
--t-btn-bg-color: #e6a23c;
66+
--t-btn-hover-bg-color: #eebe77;
67+
&[disabled] {
68+
--t-btn-bg-color: #f3cf9a;
69+
}
70+
}
71+
&.type-info {
72+
--t-btn-main-color: #909399;
73+
--t-btn-bg-color: #909399;
74+
--t-btn-hover-bg-color: #b1b3b8;
75+
&[disabled] {
76+
--t-btn-bg-color: #d5d7da;
77+
}
78+
}
79+
&.type-danger {
80+
--t-btn-main-color: #f56c6c;
81+
--t-btn-bg-color: #f56c6c;
82+
--t-btn-hover-bg-color: #f89898;
83+
&[disabled] {
84+
--t-btn-bg-color: #f89898;
85+
}
86+
}
87+
88+
&.plain {
89+
--t-btn-border-width: 1px;
90+
--t-btn-border-style: solid;
91+
--t-btn-border-color: var(--t-btn-bg-color);
92+
--t-btn-color: var(--t-btn-bg-color);
93+
94+
--t-btn-hover-border-color: var(--t-btn-hover-bg-color);
95+
--t-btn-hover-color: var(--t-btn-hover-bg-color);
96+
background-color: unset;
97+
}
98+
99+
&.plain-dashed {
100+
--t-btn-border-width: 1px;
101+
--t-btn-border-style: dashed;
102+
--t-btn-border-color: var(--t-btn-bg-color);
103+
--t-btn-color: var(--t-btn-bg-color);
104+
105+
--t-btn-hover-border-color: var(--t-btn-hover-bg-color);
106+
--t-btn-hover-color: var(--t-btn-hover-bg-color);
107+
background-color: unset;
108+
}
109+
&.plain-text {
110+
--t-btn-border-width: 0;
111+
--t-btn-border-style: dashed;
112+
--t-btn-border-color: var(--t-btn-bg-color);
113+
--t-btn-color: var(--t-btn-bg-color);
114+
115+
--t-btn-hover-border-color: var(--t-btn-hover-bg-color);
116+
--t-btn-hover-color: var(--t-btn-hover-bg-color);
117+
background-color: unset;
118+
119+
&:not([disabled]):active {
120+
transition: all calc(var(--t-transition-duration) / 3) ease-out;
121+
transform: translateY(-5px);
122+
}
123+
}
124+
125+
&.type-default {
126+
--t-btn-main-color: var(--t-primary-bg-color);
127+
--t-btn-border-width: 1px;
128+
--t-btn-color: var(--t-text-color);
129+
--t-btn-border-color: var(--t-btn-color);
130+
--t-btn-hover-border-color: var(--t-primary-bg-color);
131+
--t-btn-hover-color: var(--t-primary-bg-color);
132+
&[disabled] {
133+
--t-btn-color: #cecece;
134+
--t-btn-border-color: #cecece;
135+
}
136+
&.plain-text {
137+
--t-btn-border-width: 0;
138+
}
139+
}
140+
&.#{$PREFIX}size-lg {
141+
--t-btn-padding: 10px;
142+
}
143+
&.shape-round,
144+
&.shape-circle {
145+
--t-btn-radius: calc(var(--t-size) / 2);
146+
}
147+
&.shape-circle {
148+
width: var(--t-size);
149+
//overflow: hidden;
150+
//text-overflow: ellipsis;
151+
//white-space: nowrap;
152+
&.#{$PREFIX}size-lg {
153+
--t-btn-padding: 5px;
154+
}
155+
}
156+
157+
.btn-wave {
158+
position: absolute;
159+
left: 0;
160+
right: 0;
161+
top: 0;
162+
bottom: 0;
163+
border-radius: inherit;
164+
animation-duration: 0.5s;
165+
animation-iteration-count: 1;
166+
}
167+
.btn-wave-active {
168+
animation-name: btn-wave;
169+
}
170+
+ .#{$PREFIX}button {
171+
margin-left: 8px;
172+
}
173+
}
174+
175+
@keyframes btn-wave {
176+
0% {
177+
box-shadow: 0 0 0.5px 0 var(--t-btn-main-color);
178+
opacity: 0.65;
179+
}
180+
181+
100% {
182+
box-shadow: 0 0 0.5px 4.5px var(--t-btn-main-color);
183+
opacity: 0;
184+
}
185+
}

0 commit comments

Comments
 (0)