前言
在前端开发中，我们通常会使用 lint 工具来检查代码，以避免各种潜在的错误。其中，stylelint 是一款专门用于检查 CSS 代码的 lint 工具。它具有强大的插件机制，可以通过插件来扩展其功能。而今天我们要介绍的就是一款 stylelint 的插件——stylelint-no-mismatching-module-file，它可以帮助我们避免 CSS 模块文件与实际引用的模块不匹配的情况。
安装
安装 stylelint-no-mismatching-module-file，你需要先安装 stylelint：
npm install stylelint
然后再安装 stylelint-no-mismatching-module-file：
npm install stylelint-no-mismatching-module-file
配置
在配置文件 .stylelintrc 中的 plugins 中添加 "stylelint-no-mismatching-module-file"，并在 "rules" 中添加 "no-mismatching-module-file/no-mismatching-module-file": true：
{
"plugins": [
"stylelint-no-mismatching-module-file"
],
"rules": {
"no-mismatching-module-file/no-mismatching-module-file": true
}
}使用
在 .scss 或 .css 文件中，我们通常会使用 @use 或 @import 来引入其他模块的样式文件。而如果我们将这些文件放到不同的目录中时，如果不小心将路径设置错误，就有可能出现 CSS 模块文件与实际引用的模块不匹配的情况。这时，stylelint-no-mismatching-module-file 就可以帮助我们发现这种问题，从而及时调整路径。
示例
假设我们有以下的项目结构：
-- -------------------- ---- -------
----
-----------
-------
------------------
---------
------
-----
----------------
-------我们在 Home.module.scss 中引入了 Button.module.scss：
/* src/pages/Home/Home.module.scss */ @use "../../components/Button/Button.module.scss" as *;
但我们把 Button.module.scss 放到了错误的位置 src/pages/Button/Button.module.scss，这时我们运行 stylelint，就会发现错误：
/Users/yourname/project/src/pages/Home/Home.module.scss 1:0 ✖ Cannot resolve module "../../components/Button/Button.module.scss" from "/Users/yourname/project/src/pages/Home"
这样一来，我们就可以及时发现问题，调整路径，从而避免由此引起的错误。
总结
stylelint-no-mismatching-module-file 是一款非常实用的插件，可以帮助我们避免 CSS 模块文件与实际引用的模块不匹配的情况。在项目中使用该插件可以帮助我们提高代码的可维护性和稳定性，值得推荐。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005554581e8991b448d279b