0

Editing sass/scss is working via source maps only through code editor in devtools.

But when i make changes in elements -> styles tab, these changes are not saved to sass/scss file.

For example, if I change border-radius to another value, it will not be saved to scss file. enter image description here

Here is my scss code

.SiteBuilder .e-row__select {
  position: relative;

  &:after {
    content: '';
  }

  select {
    border-radius: 4px;
  }
}
TheodorosPloumis
  • 2,396
  • 1
  • 17
  • 31
AamirR
  • 11,672
  • 4
  • 59
  • 73

1 Answers1

0

The styles you see from inspector are coming only from css files.

You can see the "sass/scss" source for each css property because there is a *.css.map associated with the current css file. The *.css.map file is generated from the sass compiler.

Every change you make on the Styles tab is not saved anywhere.

In order to make css changes you could use Chrome Devtools "Local Overrides" or "Workspaces". But even on this case you could edit the css or scss files from the Sources tab, not from the inspector.

TheodorosPloumis
  • 2,396
  • 1
  • 17
  • 31
  • Please notice the green circle in my screenshot, this means local overrides are active. When I am using css (not sass), every change I make is successfully saved from the Styles tab, but it sucks when you cant change sass code where I already have source maps generated. – AamirR Feb 12 '22 at 17:40
  • @AamirR, where you able to manage a way to make Local Overrides work in sass files? – The.Wolfgang.Grimmer Oct 06 '22 at 09:23