Javascript 为导入的CSS文件添加前缀

我的React应用程序（内置）的目的是嵌入其他网站（“小部件”），而不是一个独立的应用程序

因此，我为网站所有者提供缩小的JS和CSS文件，他们通过添加

和

将其插入网页
然后，当调用某个全局函数时，我的应用程序会在托管网站的顶部以模式显示其UI

为了避免样式冲突，我确保在CSS类前面加上模块特有的前缀-例如，我将把它命名为

my-module-123-page-container，而不是类
page container
。
这样，如果托管网站有一个名为
page-container
的类，那么我的模块将不会覆盖其属性，而是使用唯一的
my-module-123-page-container
类

我的问题是导入的CSS文件-例如，如果我的应用程序依赖于（通过
npm安装
ing），则将定义一些通用类名，我不控制这些类名，并且无法为其添加前缀以使其唯一

到目前为止，我能想到的解决方案是：

拆分我的应用程序，使实际的用户界面显示在
iframe
中，这样一来，风格肯定会与托管网站分离
分叉依赖项，疯狂地重命名所有类，并使其所有React组件使用重命名的类
这两种选择听起来都很糟糕

有人能指点我吗？
我相信这不是一个罕见的问题-所有这些产品，让你嵌入到你的网站，但有自己的风格做什么

谢谢
 这是为CSS类生成唯一名称的解决方案

基于
npm i css加载程序样式加载程序-D
您可以在
webpack.config.js

{
  loader: "css-loader",
    options: {
      modules: true,
      importLoaders: 1,
      localIdentName: "[name]_[local]_[hash:base64]",
      sourceMap: true,
      minimize: true
    }
}
[name]_[local]_[hash:base64] It means

localIdentName允许您配置生成的标识

[name]将采用组件的名称，[local]是类的名称/id，[hash:base64]是随机生成的哈希，在每个组件的CSS中都是唯一的

这是参考站：
谢谢！现在，由于我使用CreateReact应用程序，我要么需要弹出，要么使用它们的版本。