webpack样式加载器-在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属性：

list.css

body {
    background-color: #ddd;
}

details.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。 你可以在这里阅读。

可以将所有冲突的CSS放入.useable.css并使用可用的api为这些文件创建一个加载程序。

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

希望能帮助到你。

Answer 2

使用isomorphic-style-loader代替style-loader。 它将使用组件名称为您的类名称命名空间，并保持样式唯一。 因此，可以保持可组合性，唯一性和关键样式。 有关此的更多信息： https : //github.com/kriasoft/isomorphic-style-loader