对于CSS，有https://purgecss.com。
但是sass呢？
您不仅要从构建结果中消除未使用的选择器，还要从SASS源代码中消除选择。
我尝试了。 cc-kawakami/uchini: Find unused Sass codes
npm i -g uchini
（“ Uchini”是日本人从即将下沉的船上卸下货物的日语。）
$ uchini ls --help
List CSS selectors usage
USAGE
$ uchini ls --scss <value> --content <value> [--output
<value>] [--unusedOnly]
FLAGS
--content=<value> (required) Path to content file
--output=<value> Path to output file
--scss=<value> (required) Path to CSS file
--unusedOnly Unused selectors only
DESCRIPTION
List CSS selectors usage
EXAMPLES
$ uchini ls --css path/to/css --content path/to/content --output path/to/output --unusedOnly
uchini ls --scss path/to/scss --content 'path/**/*.html' --output output.json
[
{
"selector": ".header",
"positions": [
"frontend/stylesheets/_layout.scss:20:2"
]
},
{
"selector": ".card",
"positions": [
"frontend/stylesheets/_card.scss:1:0"
]
}
]
在内部使用以下内容。
首先，编译sass。
const compiled = sass.compile(
scss,
{
style: 'compressed',
sourceMap: true,
logger: sass.Logger.silent
}
)
然后，源映射创建一个消费者。
const consumer = await new sourceMap.SourceMapConsumer(compiled.sourceMap)
接下来，我们识别purgecss未使用的CSS选择器。
const rejectedCSS = await new PurgeCSS().purge({
content: [content],
css: [{ raw: css }],
rejected: true
})[0].rejected
然后，消费者可以使用源地图遍历与给定的CSS线相对应的SASS线。
const position = this.consumer.originalPositionFor({
line: 1, // since the source map is a single line in compressed
column: startOfSelector
})
就是这样。
谢谢您的阅读。