相同的样式表被捆绑到不同的包中并多次加载

Question

我正在构建一个样式表较少的 React/Antd 项目。

在 webpack 开发服务器上运行时，一切似乎都很好，但是当我构建项目时，当我访问不同的页面时，似乎加载了相同的样式表。

例如，我在第 1 页和第 2 页中设置了卡片组件的样式。 当我访问第 1 页时，Card 组件的样式正确，声明顺序正确：

.my-custom-card {
  margin: 10px;
}

.ant-card {
  margin: 0;
}

然后，当我访问第 2 页并返回第 1 页时，会加载相同的 ant-card 样式表。声明顺序现在变为：

.ant-card {
  margin: 0;
}

.my-custom-card {
  margin: 10px;
}

.ant-card {
  margin: 0;
}

并且用我的自定义类声明的边距被新加载的 ant-card 样式表覆盖。

为了澄清，唯一包含 .ant-card 的样式表来自 antd 包。此样式表已从同一个包中加载了两次。

这不会发生在 webpack-dev-server 上，只有在我构建项目时才会发生，所以我倾向于在构建过程中出现潜在问题。

Answer 1

Webpack 开发服务器在本地提供原始文件和资产。它不会使用捆绑的文件。创建捆绑包时，如果有冲突的样式，最好使用容器 css 类锁定您的 css 样式。

  .page1-container {
    .ant-card {
          margin: 10px; 
          }
       }
   }
  .page2-container {
    .ant-card {
         margin: 20px;
         }
     }     
   }