代码之家 › 专栏 › 技术社区 › Youssouf Oumar

如何在下一个项目中为CSS和SCSS设置Styleint?

stylelint next.js reactjs javascript

1

Youssouf Oumar · 技术社区 · 4 年前

我想添加 Stylelint 到我的Next.js应用程序。我在问我是否可以编辑 next.config.js 要添加 stylelint-webpack-plugin ,所以我在编译过程中会出现样式错误。

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

1 回复 | 直到 3 年前

1

3

Youssouf Oumar 3 年前

准备CSS和SCSS的设置

安装所需的程序包:

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

创建 .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;
  },

};

使用CSS设置样式表

安装所需的程序包:

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

创建 .stylelintrc 根文件夹中的文件和过去的文件:

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

使用SCSS设置Styleint

安装所需的程序包:

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

创建 .stylelintrc 根文件夹中的文件和过去的文件:

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