# Finding the individual scss file from the compiled css file

**URL:** <https://talk.jekyllrb.com/t/finding-the-individual-scss-file-from-the-compiled-css-file/5869>\
**Category:** Help\
**Created:** [April 12, 2021, 11:19am UTC](https://talk.jekyllrb.com/t/finding-the-individual-scss-file-from-the-compiled-css-file/5869 "2021-04-12T11:19:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![praneeth99](https://avatars.discourse-cdn.com/v4/letter/p/90db22/32.png) [@praneeth99](https://talk.jekyllrb.com/u/praneeth99)\
**Post date:** [April 12, 2021, 11:19am UTC](https://talk.jekyllrb.com/t/finding-the-individual-scss-file-from-the-compiled-css-file/5869/1 "2021-04-12T11:19:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![chuckhoupt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chuckhoupt/32/523_2.png) [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)\
**Post date:** [April 12, 2021, 12:12pm UTC](https://talk.jekyllrb.com/t/finding-the-individual-scss-file-from-the-compiled-css-file/5869/2 "2021-04-12T12:12:51Z")

</div>

Jekyll 4+ generates `.css.map` 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.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [April 12, 2021, 12:43pm UTC](https://talk.jekyllrb.com/t/finding-the-individual-scss-file-from-the-compiled-css-file/5869/3 "2021-04-12T12:43:22Z")

</div>

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

> **[Using Source Maps to Debug Sass in Chrome - SitePoint](https://www.sitepoint.com/using-source-maps-debug-sass-chrome/)**
>
> Vinay Raghu explains the source maps feature in Chrome, how it's beneficial to Sass debugging, and how you can enable the feature in the developer tools.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [April 12, 2021, 12:48pm UTC](https://talk.jekyllrb.com/t/finding-the-individual-scss-file-from-the-compiled-css-file/5869/4 "2021-04-12T12:48:02Z")

</div>

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.

```auto
sass:
  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` .

> **[GitHub - jekyll/jekyll-sass-converter: A Sass converter for Jekyll.](https://github.com/jekyll/jekyll-sass-converter)**
>
> A Sass converter for Jekyll. Contribute to jekyll/jekyll-sass-converter development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![praneeth99](https://avatars.discourse-cdn.com/v4/letter/p/90db22/32.png) [@praneeth99](https://talk.jekyllrb.com/u/praneeth99)\
**Post date:** [April 12, 2021, 1:07pm UTC](https://talk.jekyllrb.com/t/finding-the-individual-scss-file-from-the-compiled-css-file/5869/5 "2021-04-12T13:07:47Z")

</div>

> [@MichaelCurrin](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [April 12, 2021, 3:10pm UTC](https://talk.jekyllrb.com/t/finding-the-individual-scss-file-from-the-compiled-css-file/5869/6 "2021-04-12T15:10:37Z")

</div>

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.

Thanks
