No source maps for dart-scss configured

[mildred]

It would be great if cssbundling-rails could generate source maps.

For scss, the --no-source-map flag is in use, and if source maps are enabled, the source filename included in the map file is relative to the source directory, resulting in the browser not being able to find the source location. Not only that, but the scss source might not even be accessible from the client-side.

[thebravoman]

If the --no-source-map is removed and yarn build:css is ran we have the source map in

app/assets/builds/application.css.map

Then rake assets:precompile will do

I, [2022-01-18T21:40:40.938173 #234679] INFO -- : Writing /home/kireto/tmp/bProject/public/assets/application-b508b845c3c4897d7126333391353a0ca9f0a599a26e54df3d0e9bd397ef94b8.css
I, [2022-01-18T21:40:40.938300 #234679] INFO -- : Writing /home/kireto/tmp/bProject/public/assets/application-b508b845c3c4897d7126333391353a0ca9f0a599a26e54df3d0e9bd397ef94b8.css.gz
I, [2022-01-18T21:40:40.938454 #234679] INFO -- : Writing /home/kireto/tmp/bProject/public/assets/application.css-754fb894f8cf0562f0de69b0ef02c1ebac0641d60ef5942c0c6491f26fdd9237.map

So the application.css-map is there but the naming is wrong.

The application.css contains

/*# sourceMappingURL=application.css.map */

at the end but it should contain

/*# sourceMappingURL=application.css-754fb894f8cf0562f0de69b0ef02c1ebac0641d60ef5942c0c6491f26fdd9237.map */

In the same time the file application.css-754fb894f8cf0562f0de69b0ef02c1ebac0641d60ef5942c0c6491f26fdd9237.map ends with

...,"file":"application.css"}

but it should end wiht

..."file":"application-b508b845c3c4897d7126333391353a0ca9f0a599a26e54df3d0e9bd397ef94b8.css"}

I am wondering whether this is a job for the cssbundling-rails as it correctly includes "yarn build:css" that calls "sass..." or it is more for assets pipeline which takes assets from app/assets/builds, puts them in public and renames then with a fingerprint.

[jrochkind]

I feel like I've been waiting many years for sourcemaps for SCSS in rails, back from when it was "coming soon" in sprockets years ago (still doesn't work, for me anyway, in latest sprockets 4).

I hoped I was going to get this with the cssbundling-rails sass, since it was my impression that it was considered a standard feature in "ordinary JS sass", which we were using now... but found it was not, and it looks like it's not just me?

I'm not sure my situation is exactly the same as what @thebravoman encountered/diagnosed.

I am looking to have it working in development rather than prod (this is where I want sourcemaps myself). If I remove --no-source-maps to have the sass tool build a sourcemap... when chrome dev tools try to show source, the problem is that it can't find the original source file, I get it telling me:

Could not load content for http://localhost:3001/stylesheets/my_local_css_file.scss (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

Im not totally sure if this is the same situation?

Thanks to @thebravoman for seeing how far you could get it, and the diagnosis. I share @thebravoman's questions, it's not clear to me what tool should be taking care of this, it does seem to be a bit of a leak in the css-bundling rails abstraction.

It looks like source maps are supposed to be working in jsbundling-rails/esbuild, at least with recent sprockets -- it might be useful to see how that is done and see if something parallel can be done here. I haven't managed to figure that out yet.

Sourcemaps are pretty crucial for debugging your SASS when multiple SASS @imports are in play -- in my current sprockets use at least I have those old-style comments tellling me the original file and line a produced CSS line came from, without even that it's going to feel like a bit step backwards, I'm curious how others are managing without sourcemaps or inline comments indentifying original source file?

[danielnc]

I am having a similar issue to what @thebravoman described, but on my assets/build/application.css I can only see /*# sourceMappingURL=application.css.map */ at the end of the file, still no success and chrome renders the following error:

DevTools failed to load source map: Could not load content for http://myaccount.lvh.me:3000/assets/application.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

[alessandro-fazzi]

This is the configuration I use on several projects nowadays

diff --git a/config/environments/development.rb b/config/environments/development.rb
index 1fc05c36..c9b9f03f 100644
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -58,7 +58,7 @@ Rails.application.configure do
   # Debug mode disables concatenation and preprocessing of assets.
   # This option may cause significant delays in view rendering with a large
   # number of complex assets.
-  config.assets.debug = true
+  config.assets.debug = false
 
   # Suppress logger output for asset requests.
   config.assets.quiet = true
diff --git a/package.json b/package.json
index dd695cb4..277808ec 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     [redacted],
     [redacted],
     [redacted],
-    "build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --load-path=node_modules"
+    "build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --load-path=node_modules --embed-sources"
   },
   "packageManager": "yarn@3.3.0",
   "resolutions": {

[aaronjensen]

If you're using Propshaft and dart-sass, rails/propshaft#133 will need to be merged, but once it is, source maps work.