css - 在 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;

样式1.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;

样式2.css

h1 {
   color : blue
}

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

Answer 1

您可以为每个 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 ，它很好地实现了所有这些。