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

Question

我想添加 Stylelint in my Next.js app. I am asking if I can edit next.config.js to add stylelint-webpack-plugin，所以在编译过程中出现样式错误。

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

Answer 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"

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

How to setup Stylelint in a Next.js project?

javascript

css

webpack

stylelint

next.js