Webpack 打包 CSS 资源：style-loader 与 css-loader 配置详解

Webpack 处理 CSS 资源的实现

1. 一个引入 CSS 资源的案例

// index.js
import './style.css'

/* style.css */
#root {
 height: 100px;
 width: 100px;
 border: 1px solid #ccc;
}

如果直接进行打包操作，将会引发错误。为了成功打包 CSS 资源，需要采用下文介绍的几种 loader。

style-loader 配置

2. style-loader

该工具的作用是将 CSS 样式注入到 DOM 中。

结合 css-loader 使用

2.1 结合 css-loader 使用

module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
   }
  ]
 }
}

打包完成后，dist 目录下会生成一个 main.js 文件，其内容包含了我们编写的 CSS 代码。在浏览器中查看时，可以看到在 <head> 标签内插入了一个 <style> 标签，并且页面样式已经生效：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。