PostCSS define-mixin报‘未知规则’错误，编辑器提示异常求助

核心问题区分 #

这个红色下划线是编辑器的语法校验提示，而非编译错误——先确认Webpack打包是否能正常运行：如果执行npm run build或开发服务能正常启动，说明PostCSS配置本身没问题，只是编辑器不识别PostCSS的自定义规则；如果编译失败，那就是Webpack配置存在遗漏。

情况1：编译正常，仅编辑器提示错误 #

以VS Code为例，可通过以下方式解决：

• 安装PostCSS Language Support插件，让编辑器原生支持PostCSS语法
• 精准配置自定义规则（推荐）：
  1. 在项目根目录创建.vscode/css-custom-data.json，内容如下：

     {
       "atDirectives": [
         {
           "name": "@define-mixin",
           "description": "PostCSS Mixins 定义混合指令"
         },
         {
           "name": "@mixin",
           "description": "PostCSS Mixins 引用混合指令"
         }
       ]
     }
     

  2. 新建.vscode/settings.json，添加配置关联自定义规则：

     {
       "css.customData": [".vscode/css-custom-data.json"]
     }
     

• 快速忽略（不推荐，会屏蔽所有未知规则提示）：
  在VS Code设置中添加：

  "css.lint.unknownAtRules": "ignore"
  

情况2：编译也失败 #

检查Webpack配置是否遗漏了postcss-loader：
你定义的postCSSPlugins数组是正确的，但需要在module.rules里把postcss-loader加入CSS处理链，完整配置示例：

const postCSSPlugins = [
    require("postcss-import"),
    require("postcss-mixins"),
    require("postcss-simple-vars"),
    require("postcss-nested"),
    require("autoprefixer")
];

module.exports = {
  // ...其他Webpack配置（entry、output等）
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: postCSSPlugins,
              },
            },
          },
        ],
      },
    ],
  },
};

注意postcss-loader要放在css-loader之后（loader执行顺序为从后往前）。

内容的提问来源于stack exchange，提问作者DVillan