Webpack默认只处理.js文件，import './style.css'会报“Module not found”错误，因其将.css视为模块但无loader处理；需配置css-loader解析@import/url()、style-loader注入<style>标签，且use顺序必须为['style-loader','css-loader']。
为什么 import './style.css' 会触发 Module not found: Error: Can't resolve '*.css'
这不是 CSS 文件本身的问题，而是 Webpack 默认只处理 .js 文件，遇到 .css 这类非 JS 资源时，它会尝试把它当“模块”去解析——但你没配任何 loader 处理它，自然报错。常见于刚初始化项目、删了脚手架默认配置、或升级 Webpack 后漏掉样式处理链。
sass-loader 引入 .css 文件时报错的两种典型场景
当你在 .scss 文件里写了 @import './reset.css';，sass-loader 会把这行当成模块引用，而不是内联样式。它不会自动跳过 .css，而是交给 Webpack 去 resolve —— 结果就是上面那个错误。
- 用相对路径引入（如
@import './base.css';）：Webpack 尝试按模块规则查找，失败 - 用绝对路径引入（如
@import '/src/assets/base.css';）：仍需 loader 支持，否则一样报错 - 真正安全的做法是避免在 Sass 中直接
@importCSS 文件，改用@use或提前用css-loader处理
必须配齐的三类 loader 才能正确加载 CSS
单独装 css-loader 或 style-loader 都不行，缺一不可。Webpack 5+ 要求显式声明，不能靠插件隐式注入。
-
style-loader：把 CSS 插入<head>标签（开发环境常用） -
css-loader：解析@import和url()，把 CSS 转成 JS 模块 -
postcss-loader（可选但推荐）：加 autoprefixer、处理 CSS 变量等，需配postcss.config.js
示例配置片段：
立即学习“前端免费学习笔记（深入）”；
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
}
Webpack 5+ 下 MiniCssExtractPlugin 提取 CSS 的坑
用它替代 style-loader 是为了生成独立 CSS 文件，但容易忽略两个硬性条件：
- 不能和
style-loader共存于同一 rule；否则构建会静默失败或样式丢失 - 必须在
plugins里 new 实例，且use中要写MiniCssExtractPlugin.loader，不是字符串'mini-css-extract-plugin' - 开发环境建议用
style-loader，生产环境才切到MiniCssExtractPlugin.loader，否则热更新失效
易错写法：use: ['mini-css-extract-plugin', 'css-loader'] → 正确应为 use: [MiniCssExtractPlugin.loader, 'css-loader']
最常被跳过的其实是 resolve.extensions 里没加 '.css' —— 虽然不影响 import，但会影响 @import 解析和别名路径补全，尤其在搭配 alias 使用时。
