Style-loader: CSS 动态注入指南
Style-loader 能够将 CSS 代码直接注入到网页的 DOM 结构中，为前端开发者提供了一种便捷的样式管理方式。
快速上手
- 安装: 使用 npm 或 yarn 安装 style-loader：
bash
npm install --save-dev style-loader
- 配置: 在 webpack 配置文件中添加 style-loader 规则，示例如下：
javascript
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
这段配置会将所有匹配 .css 结尾的文件，先使用 css-loader 处理，然后通过 style-loader 注入到 DOM 中。
- 使用: 在 JavaScript 文件中直接引入 CSS 文件即可：
```javascript
// component.js
import './style.css';
// style.css
body {
background: green;
}
```
这样，页面加载时，style.css 中的样式就会生效。
文件大小：294.46KB
评论区