React with Webpack - 2 – css處理

Webpack允許像加載任何代碼一樣加載 CSS，而且你可以選擇 自己的加載策略：你可以在 入口主文件中加載所有的CSS 文件，也可以在每個(gè)組件component文件中加載各自的css文件。

加載 CSS 操作需要 css-loader 和 style-loader兩個(gè)加載器，他們做兩件不同的事情。css-loader會(huì)遍歷 CSS 文件，找到 url() 表達(dá)式然后解析處理他們，style-loader 會(huì)把原始的 CSS 代碼插入到頁(yè)面中的一個(gè) style tag中。

準(zhǔn)備加載 CSS

先安裝這兩個(gè)加載器：
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:

加載一個(gè) CSS 文件就和加載其他文件一樣簡(jiǎn)單：

main.js

import './main.css'; // 就是這么簡(jiǎn)單 // 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 加載策略

根據(jù)你的應(yīng)用，你可以考慮使用三種策略。另外，你應(yīng)該考慮把那些基礎(chǔ)的 CSS 內(nèi)聯(lián)到初始負(fù)載中（index.html），這樣結(jié)構(gòu)的設(shè)置能夠讓?xiě)?yīng)用在執(zhí)行時(shí)僅下載剩下部分。

所有合并文件到一個(gè)文件

當(dāng)把所有的css都合并到一個(gè)單一的css文件，在你的主入口文件中個(gè)，比如 app/main.js 你可以為整個(gè)項(xiàng)目加載到所有的 CSS：

app/main.js

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

然后CSS 就完全包含在合并的應(yīng)用中，再也不需要重新下載。

懶加載

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:

如果應(yīng)用使用多入口點(diǎn)，懶加載策略有其優(yōu)勢(shì)，我們可以使用懶加載策略。這樣可以在每個(gè)入口點(diǎn)指定包含各自的 CSS文件：

app/main.js

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

app/entryA/main.js

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

app/entryB/main.js

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

你可以使用用文件夾來(lái)分離你的模塊 ，每個(gè)模塊在其文件夾中包含了各自的 CSS 和 JavaScript 文件。當(dāng)應(yīng)用運(yùn)行時(shí)，每個(gè)入口點(diǎn)的bundle包文件中就包含了其導(dǎo)入的 CSS文件 。

具體的組件

根據(jù)這個(gè)策略，你可以為每個(gè)組件創(chuàng)建一個(gè)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>)} });

使用內(nèi)聯(lián)樣式取代 CSS 文件

在 React Native 中，不再需要使用任何 CSS 文件，你只需要使用 style 屬性(這里所說(shuō)不是html 標(biāo)簽，而是react內(nèi)component的class)，可以把你的 CSS 定義成一個(gè)對(duì)象，那樣就可以根據(jù)你的項(xiàng)目重新來(lái)考略你的 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改動(dòng)自動(dòng)刷新

當(dāng) Webpack-dev-server 在瀏覽器自動(dòng)刷新下運(yùn)行的時(shí)候，CSS 也會(huì)自動(dòng)更新。不過(guò)不同的一點(diǎn)就是，當(dāng)你改變了一個(gè) CSS 文件，屬于那個(gè)文件的標(biāo)簽會(huì)更新新的內(nèi)容，但是，頁(yè)面不會(huì)刷新。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。