如何在 Next.js 项目中设置 Stylelint？答案

【问题标题】：How to set up Stylelint in a Next.js project?如何在 Next.js 项目中设置 Stylelint？
【发布时间】：2021-11-30 03:56:02
【问题描述】：

我想在我的 Next.js 应用程序中添加 Stylelint。我在问我是否可以编辑next.config.js 以添加stylelint-webpack-plugin。

// next.config.js
module.exports = {
  reactStrictMode: true,
};

【问题讨论】：

标签： javascript css webpack next.js stylelint

【解决方案1】：

以下是为 CSS 和 SCSS 添加 Stylelint 的方法。只需遵循这 4 个简单的步骤。

第一步：

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

在您的根文件夹中创建 .stylelintrc 文件并在其中添加：

{
 "extends": "stylelint-config-standard",
 "rules": {
   "string-quotes": "double"
  }
}

在您的根文件夹中创建 .stylelintignore 文件并在其中添加：

node_modules

编辑next.config.js文件：

const StylelintPlugin = require("stylelint-webpack-plugin"); // line to add
module.exports = {
  reactStrictMode: true,
      
  // lines to add
  webpack: (config, options) => {
    config.plugins.push(new StylelintPlugin());
    return config;
  },

};

你可以走了。现在如果你想使用scss 而不是css，你所要做的就是：

npm i sass stylelint-config-standard-scss --save-dev

并通过更改此行来更新您的 .stylelintrc 文件：

"extends": "stylelint-config-standard"

用这个：

"extends": "stylelint-config-standard-scss"

【讨论】：