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下的配置步骤了