Finding the individual scss file from the compiled css file

I am trying to make change to a particular element in my webpage using the Inspect element option. I found what I had to change in the css file to make the change, now I would like to know in which scss file this change has to be made.
How do I do this? I tried searching the relevant scss files for that particular line, but was not able to find the suitable one.
I Would be grateful if any one of you could help me resolve this.

1 Like

Jekyll 4+ generates files when compiling SCSS. Most browsers developer tools will display a link back to the SCSS file, when you inspect the styles of a particular element.

1 Like

Indeed. Chrome has builtin support for source maps for scss as per screenshot here of inspecting to get scss file

Jekyll comes bundled with Sass converter plugin to handle SCSS/SASS.

It defaults to create source maps - “always”.

If you are having issues in the browser, you’ll have an issue reading the source map file as it is not for humans.

But you can try add this to config. So your output CSS file tells you which SCSS file and line it came from.

  line_comments: true

When set to true , the line number and filename of the source is included in the compiled CSS-file. Useful for debugging when the source map is not available, but might considerably increase the size of the generated CSS files.

Defaults to false .

Whoow!! Thank you very much. I have been trying to figure this out since 2 days, finally fixed it.

1 Like

Glad to hear. I was looking at the plugin in the last weeks where I discovered the line feature, so happy I found that again.

Please mark my answer as solution when you can.