javascript - 摇树萨斯

Question

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

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

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

Answer 1

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

/* 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 */

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