为导入的 CSS 文件添加前缀答案

【问题标题】：Prefixing imported CSS file为导入的 CSS 文件添加前缀
【发布时间】：2019-01-22 06:28:04
【问题描述】：

我的 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 类前面加上我的模块独有的东西 - 例如，我将其命名为 my-module-123-page-container，而不是 page-container。这样，如果托管网站有一个名为 page-container 的类，那么我的模块将不会覆盖其属性，而是使用唯一的 my-module-123-page-container 类。

我的问题在于导入的 CSS 文件 - 例如，如果我的应用程序依赖于（npm installing）Material-UI，则将定义一些通用类名，我无法控制它们，也无法通过前缀使其唯一。

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

拆分我的应用，以便实际 UI 以 iframe 呈现，这样样式肯定会与托管网站分开。
fork 依赖，疯狂地重命名所有的类，让它的所有 React 组件都使用重命名的类。

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

谁能指导我？我敢肯定这不是一个罕见的问题 - 所有那些让您将它们嵌入到您的网站中但有自己的样式的产品有什么作用？

谢谢！

【问题讨论】：

标签： javascript html css node.js reactjs

【解决方案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

【讨论】：

谢谢！现在，由于我使用 create-react-app 我需要弹出，或者使用他们的 @next 版本。