1. 什么是 pickconcss ？
pickconcss 是一个基于 CSS Modules 的 CSS 框架，它可以帮助开发者快速构建一些基础组件。pickconcss 不仅提供了样式，还封装了一些基础组件，比如按钮、表单等，可以大大缩短前端开发的时间。
2. 安装
可以通过 npm 安装 pickconcss：
npm install pickconcss --save
3. 使用
3.1 引入样式
在 html 的 head 标签中添加：
<link rel="stylesheet" href="node_modules/pickconcss/dist/pickconcss.min.css">
3.2 使用组件
pickconcss 中包含了多个组件，可以直接使用。这里以按钮组件为例。
<button class="pc-btn pc-btn-primary">Primary Button</button> <button class="pc-btn pc-btn-default">Default Button</button> <button class="pc-btn pc-btn-danger">Danger Button</button>
3.3 自定义主题
pickconcss 中提供了一个变量文件 node_modules/pickconcss/src/variables.css，可以通过修改该文件来自定义主题。
例如，如果我们要将按钮的主题颜色修改为红色，可以在 variables.css 中添加：
:root {
--pc-btn-primary-bg: red;
}然后在页面中引入修改后的 variables.css 文件即可。
4. 示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ------------
----- ---------------- -------------------------------------------------------
----- ---------------- ---------------------
-------
------
------- ------------- ----------------------- ---------------
------- ------------- ----------------------- ---------------
------- ------------- --------------------- ---------------
------- -----------------------
-------
-------5. 总结
通过使用 pickconcss，可以快速构建基础组件，大大减少前端开发的时间。同时，通过自定义主题，也可以为自己的项目定制风格统一的组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005727481e8991b448e8a8b