前言
在前端开发中，CSS 是一个非常重要的技术，而 PostCSS 是 CSS 后处理工具中的佼佼者，可以帮我们提高 CSS 的编写效率，降低代码的维护成本。Buddy-Plugin-PostCSS 是一个很不错的 PostCSS 的集成插件，可以使得 PostCSS 的使用更加简单。本文将介绍 Buddy-Plugin-PostCSS 的安装、使用、相关配置及示例代码。
安装
Buddy-Plugin-PostCSS 是一个 npm 包，可以直接在命令行中使用以下命令进行安装：
npm install --save-dev @buddy-works/buddy-plugin-postcss
使用
Buddy-Plugin-PostCSS 支持多种使用方式，其中最常用的是将其作为 Webpack 的 loader 进行使用。在 Webpack 中加入如下 loader 配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ---------------
--
-
------- -------------
--
-
------- ------------------------------------
-------- -----
-
-
-
-
-
-配置
Buddy-Plugin-PostCSS 支持很多种配置方式，这里列举常用的一些。
插件
Buddy-Plugin-PostCSS 支持常用的 PostCSS 插件，例如 autoprefixer，cssnano，postcss-import 等等。如果要使用这些插件，可以将其加入 options 的 plugins 属性中：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ---------------
--
-
------- -------------
--
-
------- ------------------------------------
-------- -
-------- -
--------------------------
---------------------
----------------------------
-
-
-
-
-
-
-
-配置文件
除了通过 options 的方式配置插件之外，Buddy-Plugin-PostCSS 还支持使用配置文件的方式进行配置。在项目根目录下创建 postcss.config.js 文件，并在其中配置插件即可：
module.exports = {
plugins: [
require('autoprefixer')(),
require('cssnano')(),
require('postcss-import')(),
]
}浏览器兼容性
Buddy-Plugin-PostCSS 还支持使用 browserslist 来设置浏览器兼容性。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ---------------
--
-
------- -------------
--
-
------- ------------------------------------
-------- -
--------- ------ - ---------- --- -- ----
-
-
-
-
-
-
-示例代码
autoprefixer 的使用
.example {
display: flex;
}-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ---------------
--
-
------- -------------
--
-
------- ------------------------------------
-------- -
-------- -
--------------------------
-
-
-
-
-
-
-
-经过上述配置之后，编译后的 CSS 代码如下：
.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}可以看到，autoprefixer 已经自动为我们添加了浏览器前缀。
结语
通过 Buddy-Plugin-PostCSS，我们可以很方便的使用 PostCSS，大大提高了前端开发 CSS 的效率和代码质量，同时也避免了重复繁琐的 CSS 编写工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8dccdc64669dde5562