I'm working on a Rails 5.2 application. I upgraded Sprockets from 3.7.2 to 4.0.2 and changed sass-rails 5.0.7 by sassc-rails 2.1.2.
To have sourcemap working for JS files, I have Rails.configuration.assets.debug = true. This work for JS files but don't for scss files. The generated sourcemap don't include dependencies introduce by @import.
I tried to set Rails.configuration.sass.inline_source_maps = true. The file main.css was generated correctly like this :
/* line 1, app/assets/stylesheets/dep.scss */
body {
color: red;
}
/* line 3, app/assets/stylesheets/main.scss */
body.user-form {
background-color: blue;
}
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiYXBwL2Fzc2V0cy9zdHlsZXNoZWV0cy9tYWluLmNzcyIsCgkic291cmNlcyI6IFsKCQkiYXBwL2Fzc2V0cy9zdHlsZXNoZWV0cy9tYWluLnNjc3MiLAoJCSJhcHAvYXNzZXRzL3N0eWxlc2hlZXRzL2RlcC5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiQGltcG9ydCAnZGVwJztcblxuYm9keS51c2VyLWZvcm0ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlO1xufVxuIiwKCQkiYm9keSB7XG4gIGNvbG9yOiByZWQ7XG59XG4iCgldLAoJIm5hbWVzIjogW10sCgkibWFwcGluZ3MiOiAiO0FDQUEsQUFBQSxJQUFJLENBQUM7RUFDSCxLQUFLLEVBQUUsR0FBRztDQUNYOzs7QURBRCxBQUFBLElBQUksQUFBQSxVQUFVLENBQUM7RUFDYixnQkFBZ0IsRUFBRSxJQUFJO0NBQ3ZCIgp9 */
But when debug is enabled, sprockets loads main.debug.css which look like this :
/* line 1, app/assets/stylesheets/dep.scss */
body {
color: red;
}
/* line 3, app/assets/stylesheets/main.scss */
body.user-form {
background-color: blue;
}
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiYXBwL2Fzc2V0cy9zdHlsZXNoZWV0cy9tYWluLmNzcyIsCgkic291cmNlcyI6IFsKCQkiYXBwL2Fzc2V0cy9zdHlsZXNoZWV0cy9tYWluLnNjc3MiLAoJCSJhcHAvYXNzZXRzL3N0eWxlc2hlZXRzL2RlcC5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiQGltcG9ydCAnZGVwJztcblxuYm9keS51c2VyLWZvcm0ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlO1xufVxuIiwKCQkiYm9keSB7XG4gIGNvbG9yOiByZWQ7XG59XG4iCgldLAoJIm5hbWVzIjogW10sCgkibWFwcGluZ3MiOiAiO0FDQUEsQUFBQSxJQUFJLENBQUM7RUFDSCxLQUFLLEVBQUUsR0FBRztDQUNYOzs7QURBRCxBQUFBLElBQUksQUFBQSxVQUFVLENBQUM7RUFDYixnQkFBZ0IsRUFBRSxJQUFJO0NBQ3ZCIgp9 */
/*# sourceMappingURL=main.css-06368f2ebb8ca98cf10b6bd70c61bd6e64161d93c3ebf7f85e002ca438f83e77.map */
As you can see, the sourceMappingURL is included twice and only the last line is taken by dev tools. The related sourcemap file still doesn't include data about dep.scss.
If I set debug to false, the file main.css is loaded by the application so sourcemap is correct for css files BUT it isn't for JS files.
I inspected sprockets and sassc-rails source code and found that it works in debug mode for both kind of files when I change lib/sassc/rails/railtie.rb#L57 from :
This way, the soucepmap generated by sprockets includes all dependencies when debug is true. Rails.configuration.sass.quiet as to be set to false (don't ask me why).
I'm not a sprocket expert so let me know if I miss something.
I'm working on a Rails 5.2 application. I upgraded Sprockets from 3.7.2 to 4.0.2 and changed sass-rails 5.0.7 by sassc-rails 2.1.2.
To have sourcemap working for JS files, I have
Rails.configuration.assets.debug = true
. This work for JS files but don't for scss files. The generated sourcemap don't include dependencies introduce by@import
.For example, I have those files :
The sourcemap generated looked like :
Information about
dep.scss
are missing.I tried to set
Rails.configuration.sass.inline_source_maps = true
. The filemain.css
was generated correctly like this :But when
debug
is enabled, sprockets loadsmain.debug.css
which look like this :As you can see, the sourceMappingURL is included twice and only the last line is taken by dev tools. The related sourcemap file still doesn't include data about
dep.scss
.If I set
debug
tofalse
, the filemain.css
is loaded by the application so sourcemap is correct for css files BUT it isn't for JS files.I inspected sprockets and sassc-rails source code and found that it works in debug mode for both kind of files when I change lib/sassc/rails/railtie.rb#L57 from :
To
This way, the soucepmap generated by sprockets includes all dependencies when
debug
istrue
.Rails.configuration.sass.quiet
as to be set tofalse
(don't ask me why).I'm not a sprocket expert so let me know if I miss something.