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

Question

我已经使用 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
}

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

Answer 1

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

Answer 2

每个 React 组件可以有本地样式sheet。

所以样式 sheet 本身会有这样的东西：

:local(.styles) {

  .your-style{...}
}

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

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

在组件的渲染函数中，您将拥有：

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

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

Webpack 的加载器配置：

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

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

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

Overlapping CSS in React, Webpack application

css

reactjs

webpack

webpack-style-loader