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 loadertest: /\.jsx$/,loader: 'jsx'}, { // css loadertest: /\.css$/, // Only .css filesloader: '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 文件，屬于那個文件的標簽會更新新的內容，但是，頁面不會刷新。

總結

以上是生活随笔為你收集整理的React with Webpack - 2: css 处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。