css - 从 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 Devtools “ Local Overrides ”或“ Workspaces ”。但即使在这种情况下，您也可以从 Sources 选项卡而不是检查器中编辑 css 或 scss 文件。