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

问题描述

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

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

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

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

.ant-card {
  margin: 0;
}

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

.ant-card {
  margin: 0;
}

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

.ant-card {
  margin: 0;
}

，自定义类声明的边距将被新加载的蚂蚁卡样式表覆盖。

为澄清起见，唯一包含.ant-card的样式表来自antd包。此样式表已从同一捆绑软件加载两次。

仅当我构建项目时，这不会在webpack-dev-server上发生，所以我倾向于在构建过程中潜在的问题。

解决方法

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

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