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

他们有不同的风格相互覆盖，为简单起见，假设background-color body body { background-color: #ddd; }属性：

list.css

body {
    background-color: #f80;
}

details.css

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

实际发生的事情 - 当webpack＆＃39的样式加载器捆绑时，两个元素的页面上都保留了样式：

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

装载机的webpack配置：

{{1}}

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

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" }
    ]
  }
}

希望它有所帮助。

Answer 2

使用isomorphic-style-loader而不是style-loader。它将使用组件名称命名您的类名，并使样式保持唯一。因此可以保持可组合性，唯一性和关键风格。更多相关信息：https://github.com/kriasoft/isomorphic-style-loader

webpack style-loader - 在反应组件上导入不同的样式而不会覆盖

2 个答案: