如何在Next.js项目中配置Stylelint以在编译时提示样式错误？

结论 #

可以通过修改next.config.js注入stylelint-webpack-plugin的方式，实现编译阶段自动捕获样式错误，具体操作步骤如下：

操作步骤 #

• 第一步：安装必要依赖

npm install stylelint stylelint-webpack-plugin stylelint-config-standard --save-dev

• 第二步：新增Stylelint规则配置
  在项目根目录创建.stylelintrc.json配置文件，基础配置示例：

{
  "extends": "stylelint-config-standard",
  "rules": {
    // 此处可根据项目需求自定义校验规则
    "selector-class-pattern": null
  }
}

• 第三步：修改next.config.js注入插件
  修改后的完整配置如下：

// next.config.js
const StylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  reactStrictMode: true,
  webpack: (config, { dev }) => {
    // 仅在开发环境启用校验，生产构建跳过可提升编译速度
    if (dev) {
      config.plugins.push(
        new StylelintPlugin({
          // 可根据项目实际使用的样式后缀调整匹配规则
          files: ['**/*.{css,scss,sass,less}'],
          // 校验不通过时是否阻断编译，设为false则仅输出告警
          failOnError: true,
        })
      );
    }
    return config;
  }
};

补充说明 #

• 如果项目使用了CSS Modules、Tailwind CSS、SCSS等技术栈，需要额外安装对应的Stylelint共享配置并引入到.stylelintrc.json中，避免出现规则误判。
• 可在根目录新增.stylelintignore文件，忽略不需要校验的目录，比如node_modules、.next、公共依赖样式目录等。

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