共计 2022 个字符，预计需要花费 6 分钟才能阅读完成。
1. 一个引入 CSS 资源的案例
// index.js
import './style.css'/* style.css */
#root {
height: 100px;
width: 100px;
border: 1px solid #ccc;
}就这样打包的话，是会报错的，那么想要成功打包 CSS 资源，需要使用下面介绍的几个 loader。
2. style-loader
将 CSS 样式注入到 DOM 中。
2.1 结合 css-loader 使用
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
} 打包后，dist 目录下生成一个 main.js，文件内容中包含了我们所写的 CSS 代码，打开浏览器查看，在 <head> 标签内插入了一个 <style> 标签，并且页面样式也是生效的：
2.2 结合 file-loader 使用
配置 injectType 选项（用来确定以何种形式将标签插入到 DOM 中）为 linkTag。
rules: [
{
test: /\.css$/,
use: [{ loader: 'style-loader', options: { injectType: 'linkTag'} },
{loader: 'file-loader'}
]
}
] 打包后，dist 目录下生成一个 main.js 和一个 css 文件，css 文件正是我们所写的 CSS 代码，打开浏览器查看，在 <head> 标签内插入了一个 <link> 标签，并且页面样式也是生效的：
除了可以设置 injectType 选项，该 loader 还可以设置包括 attributes（在插入的标签中设置自定义属性）、insert（将标签插入到指定的 DOM 位置）和 base 选项。
更多详情查阅 style-loader。
3. css-loader
// index.js
import style from './index.css'
console.log(style)
console.log(style.toString())/* index.css */
@import url('./m1.css');
@import url('./m2.css');
#root {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}/* m1.css */
.foo {color: red;}/* m2.css */
.bar {color: blue;}打包后，打开浏览器控制台，可以看到输出的内容是这样的：
CSS 文件之间通过了 @import 语法建立了引入的关系，而 css-loader 则可以解析这种关系，然后把多个的 css 文件合并成一段 css 内容。
3.1 modules 选项
配置该选项可以启用 CSS 模块化。
下面介绍在 vue 项目中使用 CSS 模块化。先使用 vue-cli3 新建一个项目，然后改造如下：
<!-- App.vue -->
<template>
<div id="app">
<div class="foo">foo</div>
<div class="bar">bar</div>
<HelloWorld />
<HelloCSSModules />
</div>
</template>
<!-- 中间部分代码忽略 -->
<style>
#app {
height: 200px;
width: 200px;
border: 1px solid #ccc;
}
</style>HelloScoped 组件使用 scoped 作用域书写样式：
<!-- HelloScoped.vue -->
<template>
<div>
<div class="foo">hello foo</div>
<div class="bar">hello bar</div>
</div>
</template>
<!-- 中间部分代码忽略 -->
<style scoped>
.foo {color: red;}
.bar {color: blue;}
</style>HelloCssModules 组件通过 :class="$style.foo" 语法绑定类名，并且在 <style> 标签设置 module 属性：
<!-- HelloCssModules.vue -->
<template>
<div>
<div :class="$style.foo">css modules foo</div>
<div :class="$style.bar">css modules bar</div>
</div>
</template>
<!-- 中间部分代码忽略 -->
<style module>
.foo {color: green;}
.bar {color: orange;}
</style> 运行项目，打开浏览器进行对比，使用 scoped 语法会在 DOM 元素上设置唯一的自定义属性，然后通过 .foo[data-v-469af010] 语法来绑定样式；而使用 module 语法则直接将 class 类名替换成动态生成的唯一类名。
3.2 importLoaders 选项
TODO…
