如何用css-loader引入CSS文件-css教程-PHP中文网

webpack默认不识别.css文件，import会报“module parse failed”错误；必须配置['style-loader','css-loader']，因use从右向左执行：css-loader先解析@import/url()为模块依赖，style-loader再注入标签。

如何用css-loader引入css文件

直接 import 就能引入，但必须配 css-loader，否则 Webpack 会报 Module parse failed: Unexpected token —— 它根本看不懂 .css 文件。

为什么 import './index.css' 会报错

Webpack 默认只认识 JavaScript 模块。CSS 不是 JS，import 语句遇到 .css 后缀时，没有 loader 处理就会直接抛错。这不是路径问题，是解析能力缺失。

css-loader 的作用不是“让 CSS 生效”，而是“让 Webpack 能读它”：解析 @import、url(./logo.png)，把它们转成模块依赖（比如变成 require('./logo.png')）
只配 css-loader 还不行——样式不会出现在页面上，因为没人把它塞进
所以单独写 use: ['css-loader'] 会静默成功打包，但页面完全没样式，也无报错，极难排查

必须搭配 style-loader 才算真正引入

css-loader 和 style-loader 是一对固定组合，顺序不能颠倒：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

use: ['style-loader', 'css-loader'] ✅ 正确：从右往左执行，css-loader 先处理语法，再由 style-loader 把结果注入 <style></style> 标签
use: ['css-loader', 'style-loader'] ❌ 错误：style-loader 收到原始 CSS 文本，遇到 url(./icon.svg) 直接传给浏览器，触发 Can't resolve './icon.svg'
开发环境用这个组合没问题；生产环境要换 MiniCssExtractPlugin.loader，否则所有 CSS 都打进 JS 包里

modules 选项不开启，普通 CSS 就是全局的

很多人以为开了 css-loader 就自动启用 CSS Modules，其实不是：

v6+ 版本默认 modules: false，import './button.css' 导入的是全局样式，类名不哈希化
想局部作用域，得显式启用：{ loader: 'css-loader', options: { modules: true } }，或改文件名为 Button.module.css
启用后 JS 中必须写 import styles from './Button.module.css'，再用 styles.btn，直接 import './Button.module.css' 无效
第三方库（如 Ant Design）的 CSS 必须关 modules，否则选择器匹配不上

url() 和 @import 报 “Can't resolve” 怎么修

这类错误不是 css-loader 配错了，是它解析出的资源路径 Webpack 找不到：

检查图片、字体路径是否拼错，比如 url(../img/logo.png) 但实际在 src/assets/img/
确保有处理静态资源的规则，Webpack 5+ 推荐用 type: 'asset'：
```
{ test: /\.(png|jpg|gif|woff2?)$/, type: 'asset' }
```
css-loader 的 importLoaders 选项要设对：如果用了 postcss-loader 或 less-loader，就得设 importLoaders: 1 或 2，否则 @import 里的文件不会走后续 loader