有没有针对 Web 组件的 CSS 热重载解决方案？

如何解决有没有针对 Web 组件的 CSS 热重载解决方案？

我正在探索 Web 组件的开发，更具体地说，它是 Fast。但是，重新构建项目并刷新页面，然后验证CSS修改需要很长时间。 Web 组件（快速）是否有任何 CSS 热重载解决方案？（我正在使用 Webpack）

解决方法

一般来说，对于带有 Web 组件的 HMR 没有开箱即用的解决方案。这实际上取决于您如何使用 Web 组件。您是仅依赖自定义元素并使用 CSS-in-JS 还是完全使用带有封装样式的 ShadowDOM 和底层框架来声明这些样式。

您可以考虑构建自己的 HMR 驱动程序。为此，您需要具备所有三样东西才能启用 HMR - 捆绑器（假设 Webpack 已经拥有它）、服务器（Webpack 的开发服务器或中间件）和您自己的应用程序。

在您自己的应用程序中，您可以将驱动程序添加为：

// RUN SOME BOOSTRAPPING CODE

// HMR interface
if (module.hot) {
  // Capture hot update for a particular module
  module.hot.accept("./style.css",() => {
    // Logic to remove old stylesheet
  });
}

如果你看上面的代码，你会注意到如果在每个组件的影子根中定义StyleSheet，几乎不可能改变它。如果您有一些全局 CSS 被添加到顶部文档，那么通过操作来自 javascript 的 StyleSheet 对象来实现 HMR 会更简单。至少，您将获得部分 HMR。对于其他活动，您可以回退到自动整页刷新。