1

我有 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 {
   ...
}

它们有不同的样式，它们相互覆盖，为简单起见，我们假设它是background-coloron 的属性body：

列表.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'
}

这意味着详细信息的样式也在列表页面上处于活动状态。保持它们不同的最佳策略是什么？有没有办法更换样式？

4

2 回答 2

0

使用同构样式加载器代替样式加载器。它将使用组件名称命名您的类名并保持样式唯一。因此可以保持可组合性、独特性和批判性风格。更多信息：https ://github.com/kriasoft/isomorphic-style-loader

于 2016-06-20T06:19:32.847 回答
0

当您使用样式加载器时。您可以使用他们提供的可用 api。你可以在这里阅读。

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

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

希望能帮助到你。

于 2016-01-22T06:25:56.863 回答