构建 CSS 库似乎是出于纯粹的好奇心而做的事情，只是为了学习和探索，但它可以远不止于此。
我见过定制的 CSS 库被广泛使用，从大型组织到斗志昂扬的年轻初创公司。
什么是 CSS 库
你可以将 CSS 库视为可以跨多个项目使用的主题。如果你不想每次都重复样式或复制粘贴代码，这会很有帮助。如果你希望在你的 web 应用程序中保持一致（这对你的品牌有利），它也很有用。
因此，共享的 CSS 库/主题将提高你的效率和开发速度，它可以帮助你在保持一致性的同时扩展你的产品。这也可以是更广泛的设计系统的一部分。
这篇文章的重点将更多地放在构建 CSS 库而不是样式上。输出将是一个概念类似于 bootstrap 的库，你可以在其中使用 CSS 类并设置关联的 HTML 元素的样式。
那么如何构建这样的库，需要用到哪些工具呢？
以下是我们将要构建的内容的摘要：
- 使用 Vite 创建库构建，而不是 Web 应用构建
- 处理 CSS 文件中使用的静态资源
- 构建库时使用 SASS 而不是 CSS
- 使用 npm 打包库
如何创建项目
我们将使用 Vite 来构建我们的 CSS 库。然后我们用 npm 打包，最后在一个新的前端项目中使用。
Vite 是一个开发服务器和构建工具，它使实施 Web 项目成为一种快速而流畅的体验。
请按照以下步骤开始：
- 运行
npm init @vitejs/app - 输入项目名称
- 选择一个框架（Vanilla、Vue、React 等）——这里我们将选择 “vanilla”，因为我们专注于 CSS
项目的入口是 index.html。我们可以使用这个文件来测试我们正在构建的内容，但它不会被打包为我们正在创建的库的一部分。
如何更新样板代码
首先，让我们整理现有的样板代码。
我们将更新 HTML 文件以在背景中包含一个按钮和一个带有 logo 的 div 文件，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app">
<div class="logo"></div>
<button class="tomato">Click me</button>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
然后，在 “src” 目录下，删除 main.ts 文件的内容，保留导入 style.css 的第一行。
接下来，在 style.css 文件中，添加以下代码：
.tomato {
background-color: tomato;
}
.logo {
background: url(/logo.png) no-repeat;
height: 300px;
}
我们需要复制项目根文件夹下的 logo.png 文件（可以随意使用任何其他图像代替 logo.png 并相应地更改高度）。
如何构建我们的 CSS 库
在构建之前，让我们在本地运行应用程序。在你的终端中：
- 导航到项目的根文件夹
- 运行
npm install安装项目依赖 - 运行
npm run dev启动本地服务器
在浏览器中打开应用程序：http://localhost:3000（通常，它在端口 3000 上，除非该端口已被另一个应用程序使用）。
现在是构建项目的时候了，所以只需键入 npm run build，这将创建一个包含以下文件的 dist 文件夹：
如何配置构建
生成的文件夹看起来像是需要托管和服务的 Web 应用程序的构建，但我们正在构建一个库，所以我们需要添加一些配置来实现：
在项目的根目录下，创建一个新文件 config.vite.js：
import { defineConfig } from "vite";
import path from "path";
module.exports = defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, "src/main.ts"),
name: "MyCssLib",
},
},
});
再次运行 npm run build。注意 dist 文件夹的新结构：
在这种情况下，我们的包中不再有 HTML 文件，我们的样式仍然在一个 style.css 文件中。但是你会在这里看到，我们在 CSS 文件中引用的 logo 文件不再存在。
这里发生的事情是 Vite 将 assets 内联为 base64 数据 URL，所以使用这个新的 CSS 文件仍然可以正常工作——类似于引用 asset 文件时：
这很酷，但它可能会在较大的项目中引起问题，如果 CSS 文件有多个引用的静态资源，它可能会变得非常大。
如何处理 assets
Vite 提供了一种处理 assets 的简单方法，你可以保留相同的文件，并且 CSS 中引用的路径仍然有效。
在项目的根目录上，创建一个 public 文件夹并将 logo.png 文件移动到其中。本地 Web 应用程序仍将识别 logo（检查它是否仍在 http://localhost:3000 上运行）。
再次运行 npm run build。新的 dist 文件夹将如下所示：
请注意，logo 文件仍位于根级别。如果你打开 CSS 文件，它将引用相同的 logo 文件。
这里有一个 assets 文件夹来包含你的所有静态文件，很方便。你可以在 public 目录下创建此文件夹。请记住更新 CSS 文件中静态资源的路径（在本例中从 /logo.png 到 /assets/logo.png）。
如何使用 SASS 进行样式设置
开发人员经常使用 SASS 进行样式设计，因为它提供了很大的灵活性和组织性。Vite 开箱即用地处理 SASS。让我们来看看：
通过运行 npm install sass 安装 SASS。在 “src” 文件夹下，将 style.css 文件的名称更改为 style.scss。
接下来，向 style.scss 文件添加一些 SASS 更改。例如，使用一个 color 变量：
$color: tomato;
.tomato {
background-color: $color;
}
然后你将更新 “main.ts” 文件以指向 style.scss 而不是 style.css。
运行 npm run build 创建一个新的构建，并检查在 “dist” 文件夹中生成的 “style.css” 文件——它有正确的 CSS：
.tomato{background-color:tomato}
如何打包库
现在是打包库的时候了（无论在 dist 文件夹中生成了什么）。我们将使用 npm 来做到这一点。
首先，你需要更新 “package.json” 文件以包含一个名为 files 的新属性。根据 npm 文档， files 字段是一个文件模式数组，它描述了当你的包作为依赖项安装时要包含的条目。
我们只需要打包生成的 CSS 文件，因此 “package.json” 文件中的附加条目将是 files: [dist/style.css]。
接下来，你将运行 npm pack。这将创建一个新文件。在这种情况下，“vite-CSS-lib-0.0.0.tgz”。
如何使用包
首先创建一个新项目（你可以按照我们用 Vite 开始的相同方式进行）。完成后，请按照以下步骤操作：
- 安装新创建的包：
npm install <path-to-lib>/vite-css-lib-0.0.0.tgz - 在 “main.js” 文件中，导入 CSS 文件：
import 'node_modules/vite-css-lib/dist/style.css - 在你的 “index.html” 文件中，添加一个带有 “tomato” 类的按钮：
<button class="tomato">Submit</button>
运行你的应用程序。它应该有一个带有番茄背景颜色的按钮。
库需要改进的地方
当然，这不是成品——它总是可以改进的。
你可以首先导出 SASS 文件而不是编译的 CSS 文件，以便依赖于你的库的应用程序可以直接使用 SASS。你可以通过 Vite/Rollup 插件做到这一点：https://vitejs.dev/guide/api-plugin.html。
此外，当你使用 npm 打包库时， package.json 中的所有内容都将包含在包中。你可以整理 package.json 文件以停止包含任何不必要的脚本/依赖项。你可以在此处阅读有关如何执行此操作的更多信息。
最后，设置一个带有 JS 文件的包，用于导出创建的 CSS 文件，以便无需引用 node_modules/lib/style.css 即可导入库。
我希望这篇文章对你有帮助。你会如何改善这个过程？你将如何构建一个 CSS 库？