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?

回答1:

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.

回答2:

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."
3. Look for the checkbox that reads "Enable CSS source maps" and turn it on.

来源：https://stackoverflow.com/questions/24351306/how-can-i-make-sass-editing-work-in-chrome-devtools