Search code examples
csswebpacksource-mapscreate-react-app

Create-react-app css source-maps in development

How can I make visible css filenames in chrome dev tools instead of <style></style>?

Is it possible to save the changes made in dev tools into actual css/sass files?

Solution

  • First, your question title/body is a little confusing, but I'll give it a go.

    How can I make visible css filenames in chrome dev tools instead of ?

    Assuming that you're wanting to see the source files versus the compiled output, this is a Chrome Dev Tools Setting. You can access that setting most easily from the Dev Tools. With Dev Tools open, you can access Settings either via F1 or by selecting the 3-dot-stack button in the upper-right. Under Sources, you can turn on "Enable CSS Source Maps". DevTool Source Map Documentation

    Is it possible to save the changes made in dev tools into actual css/sass files?

    Yep. You can use DevTool Workspaces to do this. You can read the full Workspace recommendations here.