chrome debugging SASS

Step 1: Execute sass precompilation command

First come my project folder structure:

->Enter the sass /css file->Open the cmd command ->Enter sass --watch --scss test.scss:test.css as shown below:->

Enter the sass project and find that there are two more files, test.css.map and test.css, as shown below:

The test.css.map generated here is the key to chrome debugging ->

Open chrome F12 developer tools -> Enter the project address to configure chrome to support map debugging:

->Next step, check Enable CSS source maps

->As shown below (see the notes in the picture):

Open the css/test.scss file in source

But when we changed the test.scss content on Chrome, it could not be saved. A yellow exclamation mark always appeared in the upper left corner, as shown below:

Then let’s take a look at how to add it to the workspace, which is where it originally exists in the project

-> Then chrome will ask for the operation permission of this file, click Allow -> You will find that there is a css folder under the source, so test.scss will be associated with test.scss in your local project

At the same time, please note that the code in your editor has also changed, as shown below:

In other words, if you change the test.scss in chrome, the local test.scss will also change accordingly.

I’ve almost finished the debugging steps. Of course, the chome browser has been updating its support for SASS. Maybe the subsequent settings will not be so troublesome, so the above steps are for reference only.