lit-element + SASS 中的 Web 组件 [关闭]

Question

我正在为具有 [lit-element] 1（而不是 [open-wc] 2）的应用程序开发一些 Web 组件（我是新手），并且我想创建一个“全局默认样式” " 用于我的 Web 组件。

有人能具体解释一下如何从头开始在 Web 组件中使用 SASS 吗？我已经阅读了很多文档、帖子和其他文档，但没有人以简洁的方式解释如何做到这一点（而且我尝试过的所有方法都不起作用）。

提前致谢。

Answer 1

SASS（硬盘上的一个文件）与自定义元素/Web 组件（在浏览器中运行）几乎没有关系。

SASS 需要/是一个 pre 处理器，用于将（紧凑）SASS 语法转换为 CSS；
因为浏览器只理解CSS，而不理解SASS。

然后由您决定如何将该 CSS 交付给客户端

现在你：

• 在组件 HTML 中注入文本字符串 <style>[your CSS]</style>。
• 在模板中包含样式，您 cloneNode(true) 到您的组件中：

      <template id="component">
          <style>[your CSS]</style>
      </template>

• （2020 年 11 月）在 Chrome 中，您已经可以使用 Constructible/Constructable/Constructed 样式表
  https://developers.google.com/web/updates/2019/02/constructable-stylesheets

更多：

• https://css-tricks.com/styling-a-web-component/
• https://meowni.ca/posts/part-theme-explainer/