webpack可以將不同的文件都按照模塊的方式進(jìn)行處理悯搔，比如js佃蚜，css等都可以通過不同的loader進(jìn)行打包處理夭咬。
CSS
webpack為我們提供css-loader和 style-loader兩個(gè)工具來(lái)處理樣式表趋箩，他們二者處理的任務(wù)是不同的赃额。
css-loader使你能夠使用類似@import 和 url(...)的方法實(shí)現(xiàn) require()的功能。
style-loader將所有的計(jì)算后的樣式加入頁(yè)面中叫确。
這二者組合在一起可以使你能夠把樣式表嵌入webpack打包后的JS文件中跳芳。
我們接著上面的例子來(lái)配置這兩個(gè)工具：
安裝
npm install --save-dev css-loader
npm install --save-dev style-loader
本文以webpack文章的demo為例，如果未閱讀上文竹勉，并且想了解完整過程請(qǐng)點(diǎn)擊回到上文
配置
在webpack.config.js中配置這兩個(gè)工具
module.exports = {
...
module: {
rules: [
...
{ // 這里配置這兩個(gè)工具
test: /\.css$/,
exclude: /node_modules/,
use: [ // 請(qǐng)注意這里對(duì)同一個(gè)文件引入多個(gè)loader的方法飞盆。
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
}
}
接下來(lái)，在app文件夾里創(chuàng)建一個(gè)名字的main.css的文件次乓，對(duì)一些元素設(shè)置樣式
在
main.css文件內(nèi)填入樣式
body{
background-color: red;
border: 5px solid yellow;
}
ul, li{
list-sytle:none;
}
然后我們要怎么用這個(gè)樣式呢吓歇？，我們知道我們的例子中有一個(gè)webpack的入口票腰，沒錯(cuò)那就是main.js城看，為了讓webpack能找main.css文件，我們要將這個(gè)樣式導(dǎo)入到main.js中杏慰，其它的模塊需要通過 import, require, url等與入口文件建立其關(guān)聯(lián)析命。
main.js文件修改如下：
import React from 'react';
import {render} from 'react-dom';
import App from './App';
import './main.css'; // 使用require導(dǎo)入css文件
render(<App />, document.getElementById('root'));
通常情況下，css會(huì)和js打包到同一個(gè)文件中逃默，并不會(huì)打包為一個(gè)單獨(dú)的css文件，不過通過合適的配置webpack也可以把css打包為單獨(dú)的文件的簇搅。
CSS module
CSS的規(guī)則都是全局的完域，任何一個(gè)組件的樣式規(guī)則，都對(duì)整個(gè)頁(yè)面有效瘩将，那么如果我們?cè)O(shè)置的相同class名稱較多的時(shí)候吟税，那么可想而知頁(yè)面會(huì)從在聲明現(xiàn)象，用一個(gè)比較官方的詞就是它會(huì)造成全局污染姿现。
CSS module功能就是將JS的模塊化思想帶入CSS中來(lái)肠仪，通過CSS模塊，所有的類名备典，動(dòng)畫名默認(rèn)都只作用于當(dāng)前模塊异旧，這樣做有效避免了全局污染。
接下來(lái)我們?cè)趤?lái)改動(dòng)下webpack.config.js配置文件
module.exports = {
...
module: {
rules: [
...
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true, // 指定啟用css modules
// 指定css的嘻哈類名格式
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
]
}
]
}
}
我們?cè)赼pp文件夾下創(chuàng)建一個(gè)App.css文件提佣，并填入以下代碼來(lái)進(jìn)行一下測(cè)試
.root {
height: 30px;
background-color: green;
margin-top: 20px;
border: 2px solid blue;
}
將App.css導(dǎo)入App.js
import React, {Component} from 'react'
import config from './config.json';
import styles from './App.css'; // 導(dǎo)入
class App extends Component{
render(){
return (
<div className={styles.root}>
{config[0].text}
</div>
)
}
}
export default App
我們看下頁(yè)面運(yùn)行結(jié)果
CSS預(yù)處理器
Sass和 Less之類的預(yù)處理器是對(duì)原生CSS的拓展吮蛹，它們?cè)试S你使用類似于variables,nesting,mixins,inheritance等不存在于CSS中的特性來(lái)寫CSS荤崇，CSS預(yù)處理器可以這些特殊類型的語(yǔ)句轉(zhuǎn)化為瀏覽器可識(shí)別的CSS語(yǔ)句。
以下是常用的CSS 處理loaders
Less LoaderSass LoaderStylus Loader
不過其實(shí)也存在一個(gè)CSS的處理平臺(tái)-PostCSS潮针，它可以幫助你的CSS實(shí)現(xiàn)更多的功能术荤，在其官方文檔可了解更多相關(guān)知識(shí)。
舉例來(lái)說(shuō)如何使用PostCSS每篷，我們使用PostCSS來(lái)為CSS代碼自動(dòng)添加適應(yīng)不同瀏覽器的CSS前綴
第一步 安裝postcss-loader 和 autoprefixer（自動(dòng)添加前綴的插件）
npm install --save-dev postcss-loader
npm install --save-dev autoprefixer
第二步 在根目錄新建postcss.config.js并添加如下代碼
module.exports = {
plugins: [
require('autoprefixer')
]
}
第三步 在webpack.config.js中配置babel-loader
module.exports = {
...
module: {
rules: [
...
{
test: /\.css$/,
use: [
...
{
loader: "postcss-loader"
}
]
}
]
}
}
最后 重新使用npm start打包瓣戚，你寫的css會(huì)自動(dòng)根據(jù)Can i use里的數(shù)據(jù)添加不同前綴了。
