theme主题包
在构建组件库时,创建一个统一的主题包可以帮助我们管理不同的样式变量和主题配置。
步骤 1：在 packages 目录下新建 theme 目录
首先,进入 packages 目录,并创建一个新的 theme 目录
1cd packages && mkdir theme
步骤 2：初始化新目录
在新创建的 theme 目录中,初始化一个新的npm包：
步骤 3：配置 package.json
在生成的 package.json 文件中,修改 name 属性,将其值设置为 @better-ui/theme。
1{
2 "name": "theme", // [!code --]
3 "name": "@better-ui/theme", // [!code ++]
4 "version": "1.0.0",
5 "description": "",
6 "main": "index.js",
7 "scripts": {
8 "test": "echo \"Error: no test specified\" && exit 1"
9 },
10 "keywords": [],
11 "author": "",
12 "license": "ISC"
13}
步骤 4：安装
在根目录下,将新创建的 @better-ui/theme 包添加到 dependencies 中：
1pnpm add @better-ui/theme -w
全量引入
1import { createApp } from "vue";
2import App from "./App.vue";
3
4import BetterUI from "../../packages";
5
6// 全量引入
7import "@better-ui/theme/src/index.scss"
8
9const app = createApp(App);
10app.use(BetterUI);
11app.mount("#app");
:::
按需引入
例如在按需引入 button 组件时,会自动按需引入 button 组件所需的css样式,而不会引入其他组件的css样式。
1import "@better-ui/theme/src/button.scss";
1import { createApp } from "vue";
2import App from "./App.vue";
3
4import BetterUI from "../../packages";
5
6// 按需引入
7import "@better-ui/components/button/style/index.ts";
8
9const app = createApp(App);
10app.use(BetterUI);
11app.mount("#app");
:::
