「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。
什么是 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 文件以包含一个按钮和一个带有徽标的 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 文件，我们的样式仍在 styles.css 文件中。但是您会在这里看到我们在 CSS 文件中引用的徽标文件不再存在。
这里发生的事情是 Vite 将资产内联为 base64 数据 URL。所以使用这个新的 CSS 文件仍然可以正常工作——类似于引用资产文件时：
这很酷，但在较大的项目中可能会导致问题，如果 CSS 文件有多个引用的资产，它可能会变得非常大。
如何处理资产
Vite 提供了一种处理资产的简单方法，您可以在其中保留相同的文件，并且 CSS 中引用的路径仍然有效。
在项目的根目录上，创建一个public文件夹并将logo.png文件移动到其中。本地 Web 应用程序仍将识别徽标（检查它是否仍在http://localhost:3000上工作）。
再跑npm run build。新的 dist 文件夹如下所示：
请注意，徽标文件仍然存在于根级别。如果你打开 CSS 文件，它将引用同一个徽标文件。
在这里有一个资产文件夹来包含您的所有资产很方便。你可以在public目录下创建此文件夹。请记住更新 CSS 文件中资产的路径（在本例中为from /logo.pngto /assets/logo.png）。
如何使用 SASS 进行样式设置
开发人员经常使用SASS进行样式设计，因为它提供了很大的灵活性和组织性。Vite 开箱即用地处理 SASS。让我们来看看：
通过运行安装 SASS npm install sass。在“src”文件夹下，将style.css文件名更改为style.scss
接下来，将一些 SASS 更改添加到style.scss文件中。例如，使用颜色变量：
$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。
我希望这篇文章对你有所帮助。
