# 打包器(webpack/rollup) 如何加载 style 样式资源
Issue
欢迎在 Gtihub Issue 中回答此问题: Issue 737 (opens new window)
Author
style-loader 的原理是，创建一个 style 标签，并且把样式资源写到这个 style 的 innerHTML 中
Author
在打包器，比如 webpack 中，需要借用 loader 将非 JS 资源转化成可识别为 Javascript 的 module。
# 现状
在 webpack 中，处理 css 稍微比较费劲，需要借用两个 loader 来做成这件事情:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
};
- css-loader (opens new window): 处理 CSS 中的
url与@import，并将其视为模块引入，此处是通过 postcss 来解析处理，postcss 对于工程化中 css 处理的影响力可见一斑。 - style-loader (opens new window): 将样式注入到 DOM 中
@import url(./basic.css);
.bg {
background: url(./shanyue.png);
}
# 原理
如果说现代前端中 Javascript 与 CSS 是其中最重要的两种资源，那么 Babel 与 PostCSS 就是前端工程化中最有影响力的两个编译器。
css-loader 的原理就是 postcss，借用 postcss-value-parser 解析 CSS 为 AST，并将 CSS 中的 url() 与 @import 解析为模块。
style-loader 用以将 CSS 注入到 DOM 中，原理为使用 DOM API 手动构建 style 标签，并将 CSS 内容注入到 style 中。
在其源码实现中，借用了许多运行时代码 style loader runtime (opens new window)，而最简单的实现仅仅需要几行代码:
module.exports = function (source) {
return `
function injectCss(css) {
const style = document.createElement('style')
style.appendChild(document.createTextNode(css))
document.head.appendChild(style)
}
injectCss(\`${source}\`)
`;
};
使用 DOM API 加载 CSS 资源，由于 CSS 需要在 JS 资源加载完后通过 DOM API 控制加载，容易出现页面抖动，在线上低效且性能低下。且对于 SSR 极度不友好。
由于性能需要，在线上通常需要单独加载 CSS 资源，这要求打包器能够将 CSS 打包，此时需要借助于 mini-css-extract-plugin (opens new window) 将 CSS 单独抽离出来。
深入 webpack 中如何抽离 CSS 的源码有助于加深对 webpack 的理解。
Author
学习学习