Another hidden feature that is interesting is the ability to change the values in the browser and the same gets saved permanently in the stylesheets ( as long as the source is in your local system and not in a server ).
We need to create a workspace, and once that workspace is mapped to our folder, any change on our partials in the browser debugging will be saved back in the original partial stylesheets.
Select the "Enable CSS Source maps" along with the "Auto reload generated css" feature.
Once done, select the workspace tab on the left. Click "Add folder" & Navigate to the local path where your application folder exists and select them. Click Ok.
Once done, it will be asking for a confirmation. Click Allow.
Then go to the "Sources tab" , Select the app.scss which is the scss that is converted to css, Right click and select "Map to File system resource"..
And then it will pop up the name of the scss ( app.scss ) once more. Hit the Enter key.
Thats it!
Now go to your browser debugging, change the values there and see that the change is reflected in the browser as well as the latest is updated back in the scss partial.
Cool indeed! But wait..there is a problem. CHeck the app.css stylesheet and we can see that the css is updated with the new color "Goldenrod". But the scss stylesheet is still the old initial color.
To avoid this confusion, take the corresponding scss file in the Sources tab, and make the required changes.
Now, if we go back to the scss file, the same, as well as the compiled css will be in sync.
We need to create a workspace, and once that workspace is mapped to our folder, any change on our partials in the browser debugging will be saved back in the original partial stylesheets.
Select the "Enable CSS Source maps" along with the "Auto reload generated css" feature.
Once done, select the workspace tab on the left. Click "Add folder" & Navigate to the local path where your application folder exists and select them. Click Ok.
Once done, it will be asking for a confirmation. Click Allow.
Then go to the "Sources tab" , Select the app.scss which is the scss that is converted to css, Right click and select "Map to File system resource"..
And then it will pop up the name of the scss ( app.scss ) once more. Hit the Enter key.
Thats it!
Now go to your browser debugging, change the values there and see that the change is reflected in the browser as well as the latest is updated back in the scss partial.
Cool indeed! But wait..there is a problem. CHeck the app.css stylesheet and we can see that the css is updated with the new color "Goldenrod". But the scss stylesheet is still the old initial color.
To avoid this confusion, take the corresponding scss file in the Sources tab, and make the required changes.
Now, if we go back to the scss file, the same, as well as the compiled css will be in sync.
No comments:
Post a Comment