自定义颜色
在assets/styles/下新建fs-ui.scss样式文件
/* 基础scss文件 */
@import '~fs-ui/packages/fsui-style/src/common/var.scss';
@import '~fs-ui/packages/fsui-style/src/common/mixins';
/* 在这里自定义变量 */
$namespace: 'fs';
$black: #000;
$white: #fff;
$red: #f44;
$blue: #38f;
$orange: #ff976a;
$green: #06bf04;
$gray: #ebedf0;
$primary-color: #e83e43;
$disabled-color: #f67377;
$primary-text-color: #000;
$secondary-text-color: #888;
$auxiliary-text-color: #999;
$dark-hint-text-color: #bbb;
$background-color: #f5f5f9;
$disabled-background-color: #ddd;
$mask-background-color: rgba(0, 0, 0, 0.4);
$placeholder-text-color: $dark-hint-text-color;
$border-color: $disabled-background-color;
$line-color: #e5e5e5;
$transition-time: 0.3s;
$all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
$fade-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
$fade-linear-transition: opacity 0.2s linear;
$md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity
300ms cubic-bezier(0.23, 1, 0.32, 1);
$border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
$color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$radius-size: 4px;
// 最小说明文字
$size-12: 12px;
// 辅助文字
$size-14: 14px;
// 双行列表内描述
$size-15: 15px;
// 单行列表右侧操作说明
$size-16: 16px;
// 单行列表左侧主题字
$size-17: 17px;
// 页面顶部标题
$size-18: 18px;
// 辅助文字
$size-30: 30px;
/* 需要修改组件的scss文件 */
@import '~fs-ui/packages/fsui-style/src/button.scss';
@import '~fs-ui/packages/fsui-style/src/input.scss';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
方式一. 导入所有组件
// plugins/fs-ui.js
import Vue from 'vue'
import fsUI from 'fs-ui'
import 'fs-ui/lib/fsui-style/index.css'
// 这里引入 `@/assets/styles/fs-ui.scss`
// 会覆盖`fs-ui/lib/fsui-style/index.css` 中的样式
import '@/assets/styles/fs-ui.scss'
Vue.use(fsUI)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
方式二. 当使用按需引入时
// plugins/fs-ui.js
import Vue from 'vue'
import '@/assets/styles/fs-ui.scss'
import { Button } from 'fs-ui'
Vue.component('FsButton', Button)
1
2
3
4
5
6
2
3
4
5
6
// babel.config.js
module.exports = {
presets: ['@vue/app'],
plugins: [
[
'import',
{
libraryName: 'fs-ui',
libraryDirectory: 'lib',
style: false // 这里设置为false
},
'fs-ui'
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16