bad-css-loader
查找第三方css入侵式样式的webpack loader
你是否遇到过下面这种情况
// 第三方组件库中,
这个loader就是为了查找css中,是否存在全局元素样式有影响的css选择器。找到它,然后进行告警
不建议在构建时使用,可以在开发阶段添加
使用方法
··· // webpack config test: /\.css$/ use: ... // 在css-loader之前调用 loader: 'bad-css-loader' options: enable: true include: /node_module/ exclude: /src/ ... test: /\.less$/ use: 'style-loader' 'css-loader' // 在css-loader之前调用, less-loader之后 'bad-css-loader' 'less-loader' test: /\.sss/ use: 'style-loader' 'css-loader' // 在css-loader之前调用,sass-loader之后 'bad-css-loader' 'sass-loader' ···
提示优化
bad-css-loader借用webpack直接输出warning,这样用户容易忽视这个提示。现增加自定义提示 使用方法
const BadCssLog = ;// ...webpack config plugins: ...otherPlugin
options
属性 | 类型 | 默认值 | 备注 |
---|---|---|---|
enable | boolean | true | 是否启动loader |
include | string/regexp | '' | 需要loader检测的路径,不传则是全部 |
exclude | string/regexp | '' | 不需要loader检测的路径 |
TODO
- 1. 增加一个更多入侵式css选择器的正则匹配
- 2. 目前只检测了最外层级的css选择器,是否需要多验证全部层级(考虑中)
- 3. 只验证过css。less,scss需要在验证(已支持css,less,scss)
- 4. 提示自定义话
开发
npm run dev
构建
npm run build
调试
cd /path/bad-css-loadernpm linkcd /path/projectnpm link bad-css-loader