webpack 下如何使用Stylelint

Stylelint的使用

npm 或者 yarn 安装以下3个包，

 yarn add  stylelint  stylelint-config-standard  stylelint-webpack-plugin  -D 

   "stylelint"
   "stylelint-config-standard"
   "stylelint-webpack-plugin"

由于我用的react脚手架工具，直接找到webpack的配置文件，我的配置文件是webpack.config.dev.js ；

文件开始声明变量

const StylelintWebpackPlugin = require('stylelint-webpack-plugin');

再找到plugin配置项，添加如下图的代码

 new StylelintWebpackPlugin({
     context: 'src',
     configFile: path.resolve(__dirname,'../stylelint.config.js'),
     files: 'style/css/*.less',
     failOnError: false,
     quiet: true,
     fix: true
   })

注意：path.resolve（__dirname，）的意思是以当前文件的目录为根目录配置路径的，这行代码在webpack.config.dev.js里运行，那path.resolve（__dirname，）则是以当前webpack.config.dev.js的路径上拼接路径。这里可根据自己的目录结构自定义;
另外需要什么属性可根据官网（https://stylelint.io/user-guide/rules/）自己配置。
其中fix属性的值为false时不能自动修正非规范的内容，true则可以自动修复，建议先设置成false运行代码，再设置成true观察，了解后则可以设置成true

4.在项目根目录下，添加上图的 stylelint.config.js文件，这就是自己配置的规则了，贴上我的配置项：
在这里插入图片描述

module.exports = {
  "extends": "stylelint-config-standard",
  "rules": {
    "color-no-invalid-hex": true,
    "string-no-newline": true,
    "unit-no-unknown": true,
    "property-no-unknown": true,
    "comment-no-empty": true,
    "block-no-empty": true,
    "string-quotes": 'single',
    "function-comma-space-after": 'always',
    "unit-case": 'lower',
    "value-keyword-case": 'lower',
    "declaration-colon-space-after": 'always',
    "block-closing-brace-newline-after": 'always',
    "declaration-colon-space-before": 'never',
    "block-closing-brace-empty-line-before": 'never',
    "block-opening-brace-space-before": 'always',
    "indentation": 'tab'
  }
}

以上就是stylelint再webpack下的配置步骤了

webpack 下如何使用Stylelint

Stylelint的使用

猜你喜欢