前言
在前端开发中，我们经常需要为不同的浏览器提供不同的样式，这是因为不同的浏览器对 CSS 的支持度各不相同。设置适当的样式以满足这种需求会使得我们的样式表变得冗长和难以维护。polymorphic-css-loader 是一个 npm 包，它可以帮助我们简化这个过程。
什么是 polymorphic-css-loader
polymorphic-css-loader 是一个 webpack loader 。它可以为不同的浏览器加载不同的 CSS。 它可以根据需要生成多个 CSS 文件，从而为每个浏览器提供不同的样式。polymorphic-css-loader 可以解决传统的 CSS reset 会引入许多浏览器不支持的默认样式，同时也帮助我们有效减少 CSS 文件大小。
安装
你可以使用 npm 安装：
npm install polymorphic-css-loader --save-dev
使用
在 webpack 的配置中添加 loader 如下：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
---- -
-
------- -------------------------
-------- -
--------- -------------- -------------
----------- -----
--------------- -
------- ---------
-
-
--
-------------
-
-
-
-
--其中，options 为配置项，browsers 表示你需要支持的浏览器列表。你可以通过指定不同的条件为不同的浏览器生成多个 CSS 文件。cssModules 为开启 CSS Modules。cssnanoOptions 则是传递给 cssnano 的 options。
示例
我们可以看一个例子，为 Firefox 和 Chrome 应用不同的样式：
-- -------------------- ---- -------
------- ----------------------------
-------- -
------- -----
------------ -------
-------- -----
--------- -
----------------- -----
------ ------
-
----------- -
----------------- ------------
------- --- ----- -----
------ -----
-
-
----------- ------------------ -
------- --- ----- -----
------ -----
-
---------- ------------------ -
------- --- ----- ------
------ ------
-
在上面的例子中，当浏览器为 Firefox 66 或更早版本时，.buttons-secondary 会使用不同的边框颜色和字体颜色。当浏览器为 Chrome 58 或更早版本时，同样的类名也会显示不同的样式。
后记
polymorphic-css-loader 可以帮助我们更加简单地为不同的浏览器提供不同的样式，减少样式表的大小并且增强了样式的维护性。希望这篇文章能够帮助你更好地掌握和使用 polymorphic-css-loader。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551cd81e8991b448cf311