CODEWITHSUNDEEP
sassgoogle-chrome-devtools
Santosh
Santosh

Reputation: 3807

How can I make SASS editing work in Chrome Devtools?

I just follow this tutplus tutorial for source map sass.

I cannot find Support for sass option in Experiment tab under the inspect element in chrome. Is it removed? Am I late to use this feature ?

My sass version is 3.3.8 (Maptastic Maple)

How can I make SASS editing work in Chrome Devtools?

Upvotes: 9

Views: 5240

Answers (3)

mfluehr
mfluehr

Reputation: 3178

As of Chrome 75, here's how you turn on CSS source maps.

  1. Open the browser's Developer Tools (Ctrl+Shift+I).
  2. Open the dropdown menu in the top right corner, and click on "Settings." enter image description here
  3. Look for the checkbox that reads "Enable CSS source maps" and turn it on. enter image description here

Upvotes: 4

DNNdiva
DNNdiva

Reputation: 25

Just my 2 cents here. Kaspersky Chome extension was blocking my CSS mapping on Chrome Developer Tools. Didn't find anywhere how to add an exception to that...

Upvotes: 1

Santosh
Santosh

Reputation: 3807

I made it work. SASS support is no longer an experiment: It's now a standard. I just follow simple steps to make it work.

1) Open your inspect element on chrome and click on gear icon which appears to the top right.

2) Enable the CSS source maps (which is I think its enabled by default. If not just check it. After enable the css source map don't close it.)

3) Click on Workspace tab on the left panel just below the General tab.

4) Add your source code folder by clicking the Add folder button (close the box.)

5) Go on Sources tab and find your scss file.

Now you can make changes and hit ctrl+s it will automatically change on your style.scss.

Upvotes: 7

Related Questions