## CSS 處理
要讓 webpack 處理 CSS 文件,需要使用到兩個加載器: style-loader css-loader
安裝
```
yarn add style-loader css-loader --dev
```
在 `conf/webpack.config.js` 中配置:
```js
const config = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: 'main.bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
```
創建一個 `src/css/index.css` :
```css
.text {
background: red;
color: #fff;
}
```
在 `src/main.js` 中加入
```js
import './css/index.css';
```
在 `index.html` 中加入
```html
<div class="text">test</div>
```
打包后,打開 `index.html` 可以看到樣式已應用到頁面。