为何@mixin无需@include即可生效？遗留代码样式疑问

DevOps 小满

2026-7-21

未调用@mixin但样式仍生效的原因分析

结合你描述的场景（Node.tsx引入模块化PCSS，mixin内的类样式未被@include却正常生效），以下是几种最常见的原因：

预处理器配置了全局自动混入
当使用PostCSS搭配postcss-mixins这类插件时，项目可能在构建配置（webpack/Vite配置文件或postcss.config.js）中设置了自动全局注入指定mixin。比如将external加入了全局mixin列表，这样所有PCSS文件都会自动@include该mixin，无需手动编写语句。可以检查项目的PostCSS相关配置，确认是否存在这类全局混入设置。
其他文件间接调用了该mixin
虽然当前的Node.module.pcss里没有@include语句，但可能存在其他被导入的样式文件（比如全局样式、通用mixin集合文件）已经@include了external，而Node.module.pcss通过@import或项目的样式依赖链间接引入了这个已被调用的mixin，最终导致.propsIcon样式被编译输出。
mixin语法错误被当成普通样式处理
仔细检查@mixin external的写法，如果存在语法错误（比如定义时遗漏括号，或不符合预处理器语法规范），预处理器可能会忽略mixin的定义，直接将内部的.propsIcon当作普通样式块编译。例如：
```
// 错误写法，会被解析为普通样式
@mixin external {
  .propsIcon {
    // 样式内容
  }
}
```
这种情况下，无论是否写@include，样式都会正常输出。
CSS Modules的自定义插件处理
由于使用的是.module.pcss（CSS Modules），项目中可能存在自定义的PostCSS插件，会自动扫描模块化样式文件中的mixin，自动展开其中的类选择器并输出，无需显式编写@include语句。
构建缓存遗留的旧产物
有可能之前的代码中存在@include语句，后续被删除但构建缓存未清理，导致旧的编译结果仍在生效。可以尝试清理项目的构建缓存（比如删除node_modules/.cache、dist文件夹），重新构建后观察样式是否还能生效。