polymer-sass-loader 是一个能够加载 Sass 样式表的 webpack loader，它可以与 Polymer Web Components 一起使用，并支持 CSS Modules。（注：Webpack 是一个前端资源管理工具，通过 loader 的方式支持多种文件格式。）
在本文中，我们将学习如何使用 polymer-sass-loader 为 Polymer Web Components 加载 Sass 样式表。
安装 polymer-sass-loader
在开始使用 polymer-sass-loader 之前，请确保你已经安装了 Webpack 和 Sass。
首先，你需要在你的项目中安装 polymer-sass-loader：
npm install --save-dev polymer-sass-loader
配置 polymer-sass-loader
在你的 Webpack 配置文件中，添加如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- ----------
---- -
-------------------
-------------
-
------- ----------------------
-------- -
------------- -----------------
--
--
--
--
-- ---
--
--
--在上面的配置中，我们使用了 to-string-loader、css-loader 和 polymer-sass-loader。
在 Webpack 执行时，相关样式表会从 Sass 编译为 CSS。包含 CSS 的文件将被传递到 to-string-loader 和 css-loader，以便在 Polymer Web Components 中使用它们。
在 Polymer Web Components 中使用样式表
在 Polymer Web Components 的 JavaScript 文件中，使用如下方式导入样式表：
-- -------------------- ---- -------
------ ----- ---- -------------------
----- ----------- ------- --------------- -
------ --- ---------- -
------ -------------
-------
-------------------
--------
---- ---------------------
---- --- ---
------
--
-
-- ---
-在上面的代码中，我们通过从 component.scss 文件引入一个 style 变量，并在 Polymer Web Component 模板中使用其中的 CSS 样式表。
使用 CSS Modules
polymer-sass-loader 同样支持 CSS Modules。CSS Modules 提供了一种避免 CSS 类名重复的方法，通过引入带有 hash 标识的具体的类名来实现。这样一来，任何组件内部的类名都不会与其他组件发生冲突。
要启用 CSS Modules，请在 Polymer Web Component 的引入样式表的代码中添加如下选项：
import style from './component.scss?module';
现在，你可以在 Sass 样式表中使用 local 类名了：
.my-component {
color: green;
&__title {
font-size: 16px;
}
}在 Polymer Web Component 中使用该样式表如下：
-- -------------------- ---- -------
------ ----- ---- --------------------------
----- ----------- ------- --------------- -
------ --- ---------- -
------ -------------
-------
-------------------
--------
---- -----------------------------
---- ------------------------------------
---- --- ---
------
------
--
-
-- ---
-现在，这些类名已被转化为带有 hash 标识的类名了：
<div class="_3w0wbRJ_ChPSJpGtaWDJdy">
<div class="_3w0wbRJ_ChPSJpGtaWDJdy__title">
<!-- ... -->
</div>
</div>示例代码
完整示例代码可以在 Github 上获取：https://github.com/sample/example。
在启动本地 example 服务器之前，请确保按照上述步骤正确安装、配置和使用 polymer-sass-loader。
结论
本文介绍了如何使用 polymer-sass-loader 为 Polymer Web Components 加载 Sass 样式表，以及如何启用 CSS Modules。通过这些技术的使用，我们可以更好地管理各种组件的样式表，避免 CSS 类名冲突，并提高 Web 应用程序的性能和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630081e8991b448e0d71