Is there a way to output the sass source map during development? This will allow developers to know exactly what sass file and line number the style is being applied. At the moment when inspecting any style, it shows the style is coming from the compiled main.css file which is not helpful for development/debugging purposes. Please let me know if this question has already been solved/asked. Thanks in advance!
No not with core Jekyll. You can only change the output style of the Sass (e.g. expanded, compact, compressed).
You’ll need to use a plugin like jekyll-assets to enable sourcemaps or use something like Gulp to manage your assets.
I attempted to use the jekyll-assets plugin also but it still didn’t provide the sass source map (it provided the compiled main.css file when debugging in chrome). Is there an example project or repo that showcases the source map output as an example?
Not sure if there are any examples with it enabled, I don’t use jekyll-assets personally.
According to this issue it’s only enabled when compression is enabled due to how Sprockets works.