Question

我的React应用程序（使用create-react-app构建）的目的是嵌入到其他网站（“小部件”）中，而不是独立的应用程序。

因此，我为网站所有者提供了缩小的JS和CSS文件，他们通过添加<script src="my-module.min.js">和<link href="my-module.min.css" type="text/css" rel="stylesheet">将其插入网页。
然后，当调用某些全局函数时，我的应用程序将在托管网站顶部以其UI形式呈现自己。

为了避免样式冲突，我确保为CSS类添加模块唯一的前缀-例如，我将其命名为page-container，而不是类my-module-123-page-container。这样，如果托管网站有一个名为page-container的类，那么我的模块将不会覆盖其属性，而是使用唯一的my-module-123-page-container类。

我的问题是导入的CSS文件-例如，如果我的应用程序（通过npm install依赖于Material-UI，则会定义一些通用类名，这些类名我无法控制并且不能以使其独一无二。

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

拆分我的应用程序，以便将实际的UI呈现在iframe中，这样，样式就一定会与托管网站分开。
派生依赖关系，疯狂地重命名所有类，并使其所有React组件都使用重命名的类。

两个选项听起来都很糟糕。

有人可以指引我吗？我确信这不是一个罕见的问题-所有那些可以让您将它们嵌入网站但具有自己风格的产品都做了什么？

谢谢！

Answer 1

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

基于npm i css-loader style-loader -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中都是唯一的

这是参考文章： https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75

前缀导入的CSS文件

1 个答案: