stylelint 默认不检查 .module.css 文件,因其仅识别标准后缀(如.css、.scss),而.module.css属自定义扩展名,未被内置白名单收录,既不自动加载配置也不触发校验;需手动安装stylelint-config-css-modules、在extends中声明、并在vscode/webstorm中显式添加.module.css到校验范围并标记为stylesheet或设语言模式为css。

为什么 Stylelint 默认不检查 .module.css 文件
Stylelint 默认只识别标准后缀:.css、.scss、.less 等,而 .module.css 属于自定义扩展名,不在内置白名单中。它不会自动加载配置、也不会触发 linting —— 不是插件失效,是根本没被扫描到。
stylelint-config-css-modules 必须安装且正确启用
仅靠 stylelint-config-standard 无法覆盖 CSS Modules 特有规则(如 class-name-pattern、custom-property-pattern),必须显式引入专用配置包:
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
- 运行
npm install --save-dev stylelint-config-css-modules - 在
stylelint.config.js的extends中加入该配置:['stylelint-config-standard', 'stylelint-config-css-modules'] - 注意顺序:
stylelint-config-css-modules应放在后面,避免被前面的规则覆盖 - 若用 JSON 配置(
.stylelintrc.json),确保已安装对应版本兼容包(v16+ 推荐用 JS 配置)
WebStorm / VSCode 需手动声明对 .module.css 的支持
编辑器不会自动把 .module.css 当作 CSS 类型处理,必须显式绑定语言模式和校验范围:
- VSCode:在
settings.json中添加"stylelint.validate": ["css", "scss", "module.css"](注意小写,且不含点号) - WebStorm:Settings → Languages & Frameworks → Stylesheets → Code Quality Tools → Stylelint → Run for files,填入
**/*.module.css(分号分隔) - 两者都要求文件右键 → Mark as → StyleSheet(WebStorm)或确保右下角语言模式显示为
css(VSCode)
常见报错 Unknown word 或 Cannot resolve module 怎么解
这类错误多因解析器缺失或路径未识别:
-
Unknown word:说明 Stylelint 把composes、export等 CSS Modules 关键字当作了非法语法,需确认是否启用了postcss-modules解析器(但 Stylelint 官方不直接支持;实际应依赖stylelint-config-css-modules内置的适配逻辑) -
Cannot resolve module 'stylelint-config-css-modules':检查node_modules/下是否存在该包;pnpm 用户注意路径可能为node_modules/.pnpm/stylelint-config-css-modules@...,需展开确认 - 若用 ESM 项目(
type: "module"),避免用.mjs命名配置文件——当前主流 Stylelint 版本(v16.9.0)仍优先读取.cjs或.js
.module.css 这个文件后缀从第一步就没被编辑器“看见”。它不像 .scss 那样有默认映射,必须每层工具链都明确说“这是 CSS,按 CSS 规则检查”。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










