拆分 CSS 文件
让开发者能够按需引入 CSS
如果你正在创建一个 CSS 库（如 Bootstrap、Tailwind 等），最简单的方式就是提供单一文件，包含库的所有功能。然而，在这种情况下，你的 CSS 产出最终可能会变得很大，影响开发者网站的性能。为了避免这种情况，库通常会提供自定义生成 CSS 产出的功能，让产出中只包含开发者正在使用的必要 CSS（例如，参考 Bootstrap 和 Tailwind 是怎么做的）。
如果 CSS 只是你的库的一部分（例如，具有默认样式的组件库），那么最好将 CSS 按组件分离单独构建产出，在使用相应的组件时按需导入。这方面的一个例子是 react-component。
单个组件的目录如下：
button
├─ demo # 示例目录
│ └─ index.vue # 组件示例
├─ index.vue # 组件源码
└─ README.md # 组件文档使用 .vue 文件编写组件时，编译后会生成对应的 JS 和 CSS 文件，且 JS 文件中会自动引入 CSS 文件。
如果需要将 JS 和 CSS 解耦，实现主题定制等功能，在编写代码时就要使用独立的 JS 和 CSS 文件，如下所示：
button
├─ demo # 组件示例
│ └─ index.vue # 组件示例入口
├─ index.js # 组件入口
├─ index.less # 组件样式，可以为 less 或 scss
└─ README.md # 组件文档采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件。
通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。
json
{
"exports": {
".": {
"import": "./dist/xxx.es.js",
"require": "./dist/xxx.umd.js"
},
"./dist/index.css": {
"import": "./dist/index.css",
"require": "./dist/index.css"
}
}
}