How can Angular scss styles be debugged using sourceMap?

problem description

how does the Angular project configure to use sourceMap for style debugging? There is no way to establish a mapping relationship when you try to add a workspace in chrome.

the environmental background in which the problem occurs

there is no way to see the true source of a style using the debugging tools of chrome and firefox. The chrome debugger points to a scss file, but in fact there is no corresponding style. Firefox points to an inline style, and there is no corresponding style.

Webpack scss css angular-material angular

Jun.09,2022

this has nothing to do with sourcemap. This is the default view encapsulation mode of Angular. You can change the encapsulation of related components to None.
it is recommended to take a look at the relevant ide/component-styles-sharpview-encapsulation" rel=" nofollow noreferrer "> introduction

in the document.

Previous: Error report when angular project runs for the first time

Next: How do I wait for one function to finish executing asynchronously before executing another function?