在前端开发过程中，我们经常需要考虑浏览器的兼容性，特别是对于 CSS 样式的兼容性处理。而 jss-plugin-vendor-prefixer 是一款可以帮助我们在 CSS 样式中自动添加浏览器厂商前缀的 npm 包，大大方便了前端工程师的开发流程。
什么是 jss-plugin-vendor-prefixer
jss-plugin-vendor-prefixer 是 jss 的插件。jss 是一个 CSS in JS 库，它可以帮助我们在 JavaScript 中写 CSS 样式，提供多种样式处理方法。jss-plugin-vendor-prefixer 这个插件可以自动为 CSS 样式添加各大浏览器的厂商前缀。
jss-plugin-vendor-prefixer 安装方式
我们可以通过 npm 安装 jss-plugin-vendor-prefixer，执行下面的命令：
npm install --save jss-plugin-vendor-prefixer
jss-plugin-vendor-prefixer 使用方法
首先，我们需要在项目的入口文件中引入 jss 和 jss-plugin-vendor-prefixer：
import jss from 'jss'; import vendorPrefixer from 'jss-plugin-vendor-prefixer';
其次，我们需要将 jss-plugin-vendor-prefixer 添加到 jss 中，代码如下：
jss.use(vendorPrefixer());
最后，我们就可以通过 jss 来处理样式了。
jss-plugin-vendor-prefixer 示例代码
下面是一段示例代码，演示了如何使用 jss-plugin-vendor-prefixer 为 CSS 样式添加厂商前缀：
-- -------------------- ---- -------
------ --- ---- ------
------ -------------- ---- -----------------------------
--------------------------
----- ------ - -
------- -
-------- ---------------
-------- ----- ------
--------- -------
------ -------
----------- -------
------------- ------
----------- ---- --- ------
------- ----------
---------- -
----------- -------
--
----------- -
----------- -------
------ -------
--
--
--
----- ----- - --------------------------------------
----------------------- - -
------- ------------------------------------- -----------
--在上面的示例代码中，我们定义了一个 button 样式，包含了若干属性和伪类。然后我们将这个样式通过 jss.createStyleSheet() 方法创建了一个样式表实例，并通过 .attach() 方法将样式表实例附加到文档中。最后，我们使用这个样式表的样式类名来渲染页面中的按钮元素。jss-plugin-vendor-prefixer 会在渲染前自动为这些样式添加浏览器厂商前缀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4a6b5cbfe1ea061131c