Webpack引入CSS报模块错误如何解决-css教程-PHP中文网

webpack默认只处理.js文件，import './style.css'会报“module not found”错误，因其将.css视为模块但无loader处理；需配置css-loader解析@import/url()、style-loader注入标签，且use顺序必须为['style-loader','css-loader']。

webpack引入css报模块错误如何解决

为什么 `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 中直接 @import CSS 文件，改用 @use 或提前用 css-loader 处理

必须配齐的三类 loader 才能正确加载 CSS

单独装 css-loader 或 style-loader 都不行，缺一不可。Webpack 5+ 要求显式声明，不能靠插件隐式注入。

style-loader：把 CSS 插入标签（开发环境常用）
css-loader：解析 @import 和 url()，把 CSS 转成 JS 模块
postcss-loader（可选但推荐）：加 autoprefixer、处理 CSS 变量等，需配 postcss.config.js

示例配置片段：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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 使用时。