javascript - webpack style-loader - 在 React 组件上导入不同的样式而不覆盖

Question

我有 2 个 React 组件，需要内部样式:

产品列表:

import './list.css';
import React from 'react';

export default class List extends React.Component {
   ...
}

产品详情:

import './details.css';
import React from 'react';

export default class Details extends React.Component {
   ...
}

它们具有不同的样式，可以相互覆盖，为简单起见，我们假设它是 body 上的 background-color 属性:

列表.css

body {
    background-color: #ddd;
}

详细信息.css

body {
    background-color: #f80;
}

实际发生的情况 - 当由 webpack 的样式加载器捆绑时，两个元素的样式都保留在页面上:

<style type="text/css">
body {
    background-color: #ddd;
}
body {
    background-color: #f80;
}
</style>

加载器的 webpack 配置:

...
{
   test: /\.css$/,
   loader: 'style?singleton!css!cssnext'
}

这意味着详细信息的样式在列表页面上也处于事件状态。保持差异化的最佳策略是什么？有没有办法替换样式？

Answer 1

当您使用样式加载器时。您可以使用他们提供的可用 api。您可以阅读here .

所有冲突的 css 都可以放入 .useable.css 中，并使用可用的 api 为这些文件创建另一个加载器。

{
  module: {
    loaders: [
      { test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
      { test: /\.useable\.css$/, loader: "style/useable!css" }
    ]
  }
}

希望有帮助。