npm 包 milligram-postcss 使用教程
前言：
前端开发不仅仅是“长得好看”，更是要做出好用的东西。在开发时，使用框架能够加快开发效率，其中 CSS 框架可以帮助前端开发者快速构建网页的美观性样式。今天我们从 npm 包中选一个样式库 milligram-postcss，来一起学习使用教程。
一、 milligram-postcss 是什么？
milligram-postcss 是一个轻量、具有灵活性，易于使用的 CSS 框架，可以快速构建美观的网页。该框架使用了 PostCSS 进行预处理，使 milligram-postcss 具有无限扩展的可能性。在比较流行的 CSS 框架中，milligram-postcss 的压缩包大小（只有 2KB 左右）和使用简单易学有了很大的优势。
二、 如何安装 milligram-postcss？
milligram-postcss 是通过 npm 包来安装，要在项目中使用，先要安装 npm。安装好 npm 之后，在命令行中使用 npm 命令安装 milligram-postcss：
npm install milligram-postcss --save
可以在 package.json 中看到 milligram-postcss 的安装情况。
三、 如何使用 milligram-postcss？
milligram-postcss 是通过导入 CSS 文件来使用的，导入的文件方式有多种，这里介绍两种方式。
- 导入全部样式：
在 CSS 文件中直接导入：
@import "milligram-postcss";
这种方式会包含所有的样式，会增加最终编译后 CSS 文件的大小。使用时候可以直接使用 milligram-postcss 中的样式类来编写 HTML 代码。
- 导入部分样式：
在需要使用的 CSS 文件中导入需要的样式组件，以 Button 组件导入为例：
@import "milligram-postcss/src/button";
这种方式只会包含使用到的样式，避免了不必要的压力，缩小了最终编译后 CSS 文件的大小。这里所导入的 Button 组件，能够使用类名 button 来应用到 HTML 中。
四、 milligram-postcss 示例代码
在上述的导入方式中，使用类名将 CSS 样式应用到 HTML 标签之上。
比如下面这种向导出一个简单的按钮的示例：
<!-- 导入 milligram-postcss 中的 button 组件 --> @import "milligram-postcss/src/button"; <!-- Button 按钮代码 --> <button class="button">Hello！</button>
在这里调用的是 Button 组件，而且是整个组件，需注意的是在按钮的 class 属性中添加了 Button 的样式类名，才能使样式应用到按钮中。如果导入 Button 组件太麻烦，可以调用整个框架。
<!-- 导入整个框架 --> @import "milligram-postcss"; <!-- Button 按钮代码 --> <button class="button">Hello！</button>
这个方式会把整个框架的样式导入到当前的样式表中，可以方便地使用 Button 的样式。
五、 milligram-postcss 技巧
- 手动定制 milligram-postcss 的公共样式
milligram-postcss 这个组件存在许多类，但是在项目中我们往往不能全部使用，究其原因在于页面渲染速度和样式文件的压缩问题。如果我们在使用的时候只需要某几个组件，可以自己修改 milligram-postcss 源码，去掉未使用的组件样式。
-- -------------------- ---- ------- -- - ------------- ---------- ----------------- -- ---------------- ----- ------------------ ----- ------------------ ----- -- ---------- -- - --------------------- ----------- -- ------- ---------------- -- -- ------- ---------------- -- -- ------- ---------- -- -- ------- ---------- -- -- ------- ------------- -- -- ------- ----------- -- -- ------- ------------ -- ------- ----------- ------- ------------ -- -----------
- 使用 PostCSS 插件扩展 milligram-postcss
milligram-postcss 用 PostCSS 对 CSS 进行处理，在此过程中能够灵活使用 PostCSS 插件，比如常用的嵌套样式转换、Sass 或 Less 预处理。
安装 PostCSS Loader:
npm install postcss-loader --save-dev
配置 Webpack：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- ------------- ------------------
--
--
--
--此时可以直接使用已经安装的 PostCSS 插件，对 CSS 进行扩展：
/* 首先安装一个插件 */
npm install postcss-nested --save-dev
/* 在 postcss.config.js 中配置插件 */
module.exports = {
plugins: [require('postcss-nested')],
};现在就可以愉快地使用嵌套样式了：
-- -------------------- ---- -------
----- -
---------- -----
------ -
----------- --------------- ------ ------ ----------
-
------ -
----------- --------------- ------ ------ ----------
-
-结语：
milligram-postcss 轻量、扩展性强，学习成本很低，这种语言还是很值得学习的。在使用时候，最好根据项目需要，手动定制一下 milligram-postcss，剔除一些未使用的组件样式，能够有效避免毫无意义的 CSS 大杂烩，减小网页带宽压力。希望这篇文章提供了对于 milligram-postcss 的应用深度性的理解，并能够帮助你学习这个 CSS 框架。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f481d8e776d080410da