javascript - Tree shaking sass - Stack Overflow

admin管理员组

文章数量:1318156

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 pilation?

Or is there a way to simply output a list of all files used in the pilation 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

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 pilation?

Or is there a way to simply output a list of all files used in the pilation 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

• javascript
• node.js
• sass

Share Improve this question Follow edited May 4, 2018 at 19:39 sliptype asked May 4, 2018 at 19:20 sliptypesliptype 2,97411 gold badge1818 silver badges2929 bronze badges 4

• Possible duplicate of Refactoring and removing unused CSS from SASS/LESS files – Scott Sword Commented May 4, 2018 at 19:25
• Although I dont have answer to it, but it would be interesting to know if any such solution exists. One way I can think of is to use devtools coverage reporter but that need to run all scenarios to tell you exactly which code is unused and thus not a reliable option. – Rikin Commented May 4, 2018 at 19:25
• 1 Solution based on @ScottSword's link seems usage of something like: github./uncss/uncss – Rikin Commented May 4, 2018 at 19:27
• uncss looks like it removes unused styles, which would be useful as a build step. But my question is more about being able to remove unused SCSS files from the project to decrease confusion during development. – sliptype Commented May 4, 2018 at 19:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

With sass if you set the :line_ments 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.

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.

本文标签： javascriptTree shaking sassStack Overflow