Tree shaking sass

Question

I have a large project with many old/unused SCSS files. Is there any way, using node-sass or libsass, to tree-shake or remove all files that weren't used in the compilation?

Or is there a way to simply output a list of all files used in the compilation so that I can cross reference?

edit: Although there seem to be solutions to remove unused styles from the output of the sass build, I still don't see an efficient way to remove unused input files

Answer 1

With sass if you set the :line_comments option to true the generated output will contain the line number and source file where each rule was defined. You should get output like:

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

With node-sass the option is 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'))

So do something like that, then you can do:

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

and you will get output like:

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

And then you'll just have to write some script to remove the files that don't appear in that list.

Answer 2

Here you find a shell script.For both SCSS and less. follow this instruction
1. create a file with .sh with this script
2. run chmod +x ./your-file.sh
3. run ./your-file.sh less/sass

hope this will help you
thanks.