摇树无声答案

【问题标题】：Tree shaking sass摇树无声
【发布时间】：2018-10-15 08:21:09
【问题描述】：

我有一个包含许多旧的/未使用的 SCSS 文件的大型项目。有没有办法使用node-sass 或libsass 来摇树或删除所有未在编译中使用的文件？

或者有没有办法简单地输出编译中使用的所有文件的列表，以便我可以交叉引用？

edit：虽然似乎有解决方案可以从 sass 构建的输出中删除未使用的样式，但我仍然没有看到删除未使用的输入的有效方法文件

【问题讨论】：

Refactoring and removing unused CSS from SASS/LESS files的可能重复
虽然我没有答案，但知道是否存在这样的解决方案会很有趣。我能想到的一种方法是使用 devtools 覆盖率报告器，但这需要运行所有场景才能准确地告诉您哪些代码未使用，因此不是一个可靠的选择。
基于@ScottSword 链接的解决方案似乎使用了类似：github.com/uncss/uncss
uncss 看起来像是删除了未使用的样式，这对于构建步骤很有用。但我的问题更多是关于能够从项目中删除未使用的 SCSS 文件以减少开发过程中的混乱。

【解决方案1】：

Here 你会找到一个 shell 脚本。对于 SCSS 和更少。按照这个说明
1。使用此脚本创建带有 .sh 的文件
2。运行 chmod +x ./your-file.sh
3。运行 ./your-file.sh less/sass

希望对您有所帮助
谢谢。

【讨论】：

【解决方案2】：

如果您将:line_comments 选项设置为true，则使用sass 生成的输出将包含定义每个规则的行号和源文件。你应该得到如下输出：

/* line 20, sass/_reset.sass */
body {
  line-height: 1;
  color: black;
  background: white;
}

使用 node-sass 选项是sourceComments: true。

gulp.task('styles', function() {
    return gulp.src('src/sass/**/*.scss')
    .pipe(sass({ 
        style: 'expanded',
        sourceComments: true
    }))
    .pipe(gulp.dest('path/to/file.css'))

所以做这样的事情，然后你可以这样做：

grep '^/\* line \d*, .*\*/' path/to/file.css

你会得到如下输出：

path/to/file.css:/* line 20, sass/_reset.sass */

然后您只需要编写一些脚本来删除未出现在该列表中的文件。

【讨论】：

感谢您的回答！这非常有帮助，但我遇到了 sass 部分和深度嵌套文件的问题。对于来自 google 的任何人，我最终编写了一个小实用程序，它遍历 sass 导入树并将其与目录中的 sass 文件进行比较：sass-shake