React with Webpack - 2: css 处理

React with Webpack - 2 – css处理

Webpack允许像加载任何代码一样加载 CSS，而且你可以选择 自己的加载策略：你可以在 入口主文件中加载所有的CSS 文件，也可以在每个组件component文件中加载各自的css文件。

加载 CSS 操作需要 css-loader 和 style-loader两个加载器，他们做两件不同的事情。css-loader会遍历 CSS 文件，找到 url() 表达式然后解析处理他们，style-loader 会把原始的 CSS 代码插入到页面中的一个 style tag中。

准备加载 CSS

先安装这两个加载器：
npm install css-loader style-loader --save-dev

你可以把加载器配置加到 Webpack.config.js 文件中，如下：

webpack.config.js

var path = require('path');
var config = {
  entry: path.resolve(__dirname, 'app/main.js')
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
        { // jsx loader
          test: /\.jsx$/,
          loader: 'jsx'
        }, 
        { // css loader
          test: /\.css$/, // Only .css files
          loader: 'style!css' // Run both loaders
        }
    ]
  }
};

module.exports = config;

加载 CSS 文件

Loading a CSS file is a simple as loading any file:

加载一个 CSS 文件就和加载其他文件一样简单：

main.js

import './main.css';   // 就是这么简单
// Other code

Component.jsx

import './Component.css';
import React from 'react';

export default React.createClass({
  render: function () {
    return <h1>Hello world!</h1>
  }
});

注意: 你也可以在 CommonJS 和 AMD 中做同样的事情。

CSS 加载策略

根据你的应用，你可以考虑使用三种策略。另外，你应该考虑把那些基础的 CSS 内联到初始负载中（index.html），这样结构的设置能够让应用在执行时仅下载剩下部分。

所有合并文件到一个文件

当把所有的css都合并到一个单一的css文件，在你的主入口文件中个，比如 app/main.js 你可以为整个项目加载到所有的 CSS：

app/main.js

import './project-styles.css';
// 其他 JS 代码

然后CSS 就完全包含在合并的应用中，再也不需要重新下载。

懒加载

If you take advantage of lazy loading by having multiple entry points to your application, you can include specific CSS for each of those entry points:

如果应用使用多入口点，懒加载策略有其优势，我们可以使用懒加载策略。这样可以在每个入口点指定包含各自的 CSS文件：

app/main.js

import './style.css';
// 其他 JS 代码

app/entryA/main.js

import './style.css';
// 其他 JS 代码

app/entryB/main.js

import './style.css';
// 其他 JS 代码

你可以使用用文件夹来分离你的模块 ，每个模块在其文件夹中包含了各自的 CSS 和 JavaScript 文件。当应用运行时，每个入口点的bundle包文件中就包含了其导入的 CSS文件 。

具体的组件

根据这个策略，你可以为每个组件创建一个CSS 文件。通常的做法是让CSS 中的 class 命名空间使用的组件的名字，这样可以避免组件中class 和其它的一些组件的class相互干扰了。

app/components/MyComponent.css

/* 使用MyComponent的prefix(namespace) */
.MyComponent-wrapper {
  background-color: #EEE;
}

app/components/MyComponent.jsx

import './MyComponent.css';
import React from 'react';

export default React.createClass({
  render: function () {
    return (
      <div className="MyComponent-wrapper">
        <h1>Hello world</h1>
      </div>
    )
  }
});

使用内联样式取代 CSS 文件

在 React Native 中，不再需要使用任何 CSS 文件，你只需要使用 style 属性(这里所说不是html 标签，而是react内component的class)，可以把你的 CSS 定义成一个对象，那样就可以根据你的项目重新来考略你的 CSS 策略。

app/components/MyComponent.jsx

import React from 'react';

var style = {
  backgroundColor: '#EEE'
};

export default React.createClass({
  render: function () {
    return (
      <div style={style}>
        <h1>Hello world</h1>
      </div>
    )
  }
});

css改动自动刷新

当 Webpack-dev-server 在浏览器自动刷新下运行的时候，CSS 也会自动更新。不过不同的一点就是，当你改变了一个 CSS 文件，属于那个文件的标签会更新新的内容，但是，页面不会刷新。