在 React、Webpack 应用程序中重叠 CSS答案

【问题标题】：Overlapping CSS in React, Webpack application在 React、Webpack 应用程序中重叠 CSS
【发布时间】：2016-05-03 10:38:00
【问题描述】：

我已经使用 webpack 和 reactjs 创建了一个应用程序。到目前为止，我已经创建了 2 页。我已经为这两个页面定义了 CSS 样式。但是当我在加载第 1 页后加载第 2 页时，第 1 页的样式会干扰第 2 页的样式。

例如

第 1 页

require('style1.css');
var Page1 = React.createClass({
render: function(){
  return(
<div> <h1>This is Page1</h1> <span> hello from page1</span></div>
 )
}
});

module.exports = Page1;

style1.css

span {
   color : red
}

第 2 页

require('style2.css');

var Page2 = React.createClass({
render: function(){
  return(
<div> <h1>This is Page2</h1> <span> hello from page2</span></div>
 )
}
});

module.exports = Page2;

style2.css

h1 {
   color : blue
}

在page1之后加载page2时，span的颜色为红色，是从page1的style加载的。有什么办法可以避免这种干扰，还是我在这里做错了什么？

【问题讨论】：

您能告诉我们您是如何从第 1 页转到第 2 页的吗？它有一个父组件吗？路由器？
假设它是一个单页应用程序，我不确定它是否会按照您希望的方式工作。一旦加载到浏览器中，样式表不会因为您更改路由而简单地消失。
@Snahedis 是的，我正在使用 react-router 我没有在示例中添加 Link 标签。
@aw04 是的，它是一个单页应用程序。如果样式表不会为每个页面卸载，那么克服这种情况的最佳方法是什么？这里的实际问题是登录页面的样式正在扼杀我的管理页面样式。我怎么会超越这种情况，什么是最好的解决方案？我是否必须重写所有着陆页样式以免干扰新页面？
为什么不将这些样式应用于组件而不是全局？例如，代替 h1 {..}，执行 .myComponent h1 {...}

标签： css reactjs webpack webpack-style-loader

【解决方案1】：

Webpack 不会解决样式表的固有问题。如果您想要组件级样式，最简单的解决方案是使用内联样式。你也可以看看镭。 https://github.com/FormidableLabs/radium

【讨论】：

所以样式表一旦加载就不能卸载了吧？好的，谢谢史蒂文斯，我会试试镭，然后告诉你结果。

【解决方案2】：

您可以为每个 React 组件设置本地样式表。

所以样式表本身会是这样的：

:local(.styles) {

  .your-style{...}
}

您可以将其存储在与组件代码相同的文件夹中。你像这样导入样式：

/* component styles */
import { styles } from './styles.scss'

在您的组件的渲染功能中，您将拥有：

return (
  <div className={styles}>
  ...
  </div>
)

<div> 中的所有内容都将应用样式表。

Webpack 的加载器配置：

loaders: [{
  test: /\.scss$/,
  loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass',
}]

你可以看看这个很棒的boilerplate app，它很好地实现了所有这些。

【讨论】：