时间戳

首页 > 解决方案 > 在现有网站（使用范围样式和静态）中注入 React 应用程序（使用 sass 模块）

reactjs - 在现有网站（使用范围样式和静态）中注入 React 应用程序（使用 sass 模块）

问题描述

我有一个有一些特殊需求的反应应用程序。反应应用程序规格是：

react 应用的需求是：

一种解决方案是使用 web 组件将 react 应用程序包装在 shadow-root 中。这可能很好，但还有另一个问题。默认的 webpack react 配置在<head>和<body>. 由于 shadow-root.react 应用程序无法访问这些文件。

我找到了几个可以解决这个问题的插件（react-web-component和react-web-component-style-loader）但似乎它们只适用于 css-loader （我试图修改 webpack 规则以使用 scss 文件，也许我搞砸了）

config.module.rules.push({
    test: /\.scss$/,
    use: [
      { loader: "react-web-component-style-loader" },
      { loader: "sass-loader" }
    ]
  });

但我没有成功。我还检查了 defaultmodule.rules以找到适用于文件的默认规则，以在数组.scss中添加新加载程序。use我找到了（config.module.rules[1].oneOf[sassLoaderRuleId].use），我添加了规则，但没有任何变化。webcomponent 正确加载了 JS 文件，它显示了我的应用程序（这似乎完全可以工作，我还没有测试过）但是 shadow-root 内没有编译的 css/静态资源。

另一种解决方案可能是使用 iframe（在一个简单的 Web 组件中），但我更喜欢将此解决方案用作最后的机会。

有人可以帮我找到解决问题的方法吗？

标签： reactjswebpacksassweb-componentsass-loader

解决方案

推荐阅读