Css 网页包块样式和react.lazy

我面临的问题与风格的顺序有关。

---

在我的例子中，我有一个应用程序，我正在使用React.lazy，它将把我们的应用程序（JS和CSS）分成小块（以提高初始加载性能）。当我们访问第一个页面时，问题出现了（因此我们将获取与该页面相关的JS+CSS），然后我们将转到另一个页面（也将JS+CSS获取到相关页面）。在第二页上，我们覆盖了一些样式，我们在第一页上使用了这些样式。然后我们将返回到第一个页面（我们不会将CSS和JS重新获取到相关页面，因为我们在缓存中有它），问题就来了，因为覆盖样式会使第一个页面崩溃。有没有办法解决这个问题？如果第二页的样式不会直接覆盖组件的CSS类，那么问题就不会出现：（

使用样式加载器，您可以将一些CSS文件标记为惰性，并在装载路由时调用

。use（）

，在卸载路由时调用

。unuse（）

）

import styles from './styles.lazy.css';

export function LegacyRoute() {
  useLayoutEffect(() => {
    styles.use();
    return () => { styles.unuse() };
  }, []);
  return <p>Hello World</p>;
}

资料来源：

---

CSS选择器层次结构就是这样。您唯一能做的就是使用不同的类名来避免覆盖。我知道，但不幸的是，有太多的地方无法用这种方式修复它：(

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        exclude: /\.lazy\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.lazy\.css$/i,
        use: [
          { loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
          'css-loader',
        ],
      },
    ],
  },
};