## 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` 可以看到样式已应用到页面。