webpack style-loader - 在 react 组件上导入不同的样式而不覆盖答案

【问题标题】：webpack style-loader - import different styles on react components without overridingwebpack style-loader - 在 react 组件上导入不同的样式而不覆盖
【发布时间】：2015-05-30 18:10:21
【问题描述】：

我有 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>

loader 的 webpack 配置：

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

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

【问题讨论】：

标签： javascript styles reactjs webpack webpack-style-loader

【解决方案1】：

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

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

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

希望对你有帮助。

【讨论】：

【解决方案2】：

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

【讨论】：