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

Question

我想将Stylelint添加到我的 Next.js 应用程序中。我问是否可以编辑next.config.js以添加stylelint-webpack-plugin，因此我在编译期间收到样式错误。

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

Answer 1

准备 CSS 和 SCSS 的设置

1. 安装需要的包：

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

2. 在根文件夹中创建一个.stylelintignore文件并在其中添加：

node_modules

3. 编辑next.config.js文件：

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

使用 CSS 设置 Stylelint

1. 安装所需的包：

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

2. .stylelintrc在根文件夹中创建一个文件并将其粘贴到其中：

node_modules

使用 SCSS 设置 Stylelint

1. 安装需要的包：

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

2. .stylelintrc在根文件夹中创建一个文件并将其粘贴到其中：

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;
  },

};