Vite Sass安裝

Vite sass安裝

Sass安裝

1
npm install --save sass sass-loader

package.json內的dependencies會有sass sass-loader的版本訊息如圖片

assets新增scss資料夾;新增檔案allStyle.scss; main.ts引入

1
2
//main.ts
import './assets/scss/allStyle.scss'

src/assets/scss新增public.scss

1
2
//allStyle.scss
@import "./public.scss";

錯誤訊息

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
棄用警告 [import]：Sass @import 規則已棄用，將在 Dart Sass 3.0.0 中刪除。

修改方式

1
@use "./public.scss";

public.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
61
62
63
64
65
66
67
68
69
70
71
72
/*建立全域變數*/
:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13,110,253;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --default-color: hotpink;
    --bs-bg-color: #ffff;
    --bs-text-color: #808080;
    --bs-line-height: 1.5;
    --bs-font-weight: 400;
    --bs-font-size: 14px;
    --bs-font-family:"Mabry Pro","Noto Sans TC","微軟正黑體","Microsoft JhengHei","Heiti TC","黑體","Nunito Sans",sans-serif;
}
/*套用變數*/
body {
    margin: 0;
    font-family: var(--bs-font-family);
    font-size: var(--bs-font-size);
    font-weight: var(--bs-font-weight);
    line-height: var(--bs-line-height);
    color: var(--bs-dark-text-emphasis);
    background-color: var(--bs-bg-color);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

github sass安裝