从 Chrome DevTools 中的样式选项卡编辑 sass/scss 文件的任何方式

Question

编辑 sass/scss 是通过源映射只能通过 devtools 中的代码编辑器进行的。

但是当我在元素 -> 样式选项卡中进行更改时，这些更改不会保存到 sass/scss 文件中。

例如，如果我将border-radius 更改为另一个值，它将不会保存到 scss 文件中。

这是我的 scss 代码

.SiteBuilder .e-row__select {
  position: relative;

  &:after {
    content: '';
  }

  select {
    border-radius: 4px;
  }
}

Answer 1

您从检查器中看到的样式仅来自 css 文件。

您可以看到每个 css 属性的“sass/scss”源，因为有一个 *.css.map 与当前 css 文件关联。 *.css.map 文件由 sass 编译器生成。

您在“样式”选项卡上所做的每项更改都不会保存在任何地方。

为了进行 css 更改，您可以使用 Chrome 开发工具“Local Overrides”或“Workspaces”。但即使在这种情况下，您也可以从 Sources 选项卡而不是检查器中编辑 css 或 scss 文件。