前言
对于前端开发者而言，样式是非常重要的一部分。而为了实现多浏览器兼容、性能优化等目标，一些预处理器和后处理器如今也逐渐成为前端开发的重要选择。其中，postcss-polymer-loader 是一款非常实用的 npm 包，本文将详细介绍它的使用。
什么是 postcss-polymer-loader
postcss-polymer-loader 是一个 PostCSS loader，特别适用于 Polymer 元素的开发。使用该插件，你可以轻松的创建出兼容所有主流浏览器的 CSS 代码。
使用方法
首先，你需要创建一个 Polymer 元素项目。在该项目根目录的 Gruntfile.js 或 gulpfile.js 中，添加一个如下代码段：
-- -------------------- ---- -------
-------- -
-------- -
---- -
-----------------------------------
----- ---- ------------ ----
------------- -
--------------------
---------------
-
--
-
--
----- -
---- ---- -------- ---------
----- ---- -------- ------------------
-
-在上述代码中，我们使用 Grunt 或 Gulp 构建工具，加载了 postcss-polymer-loader，并将其配置到 options 中，其中 root 表示主页的路径，includePaths 表示 postcss-import 的搜索路径，然后将 postcss-polymer-loader 加载到 use 中。
接下来，我们使用下述代码片段在 polymer 元素内使用 import 引入外部样式表：
<link rel="stylesheet" href="/app/elements/x-test/x-test-styles.min.css" inject />
注意：在 Polymer 中，你需要使用 inject 属性来防止外部样式表被 Shadow DOM 包裹。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
---- -------- ---- ------ ------ ---
----- ------------ ---------------------------------------------
----------- ------------
------ -------------------------------
----- -
-------- ------
-------- -----
------- --- ----- ------
----------------- ------- ---- -----
------ ------
------------ ----
---------- -----
----------- -------
-
---------- -
-------- -----
---------- -----
---------------- -------
------- ---- --
-
------ -
------- ----
-
--------
----------
-------------
---- ------------------
-----------------
-----------------
-----------------
-----------------
------
-----------
--------
---------
--- --------
---
---------
-------------结论
通过使用 postcss-polymer-loader，我们可以轻松创建出兼容所有主流浏览器的 CSS 代码，这对于前端开发而言非常有帮助。本文对 postcss-polymer-loader 的使用做了详细介绍，并提供了示例代码，希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005678681e8991b448e3e85