如何在Chrome Workspace中修改样式后同步更新源SCSS文件

前置要求 #

首先确保你的SCSS编译流程已开启Source Map生成，不同编译工具的配置参考：

• 使用sass命令行编译：添加--source-map参数，示例：sass --watch src/scss:dist/css --source-map
• Vite项目：在vite.config.js/ts中添加配置

export default {
  css: {
    devSourcemap: true
  }
}

• Webpack项目：在webpack.config.js中配置devtool属性

module.exports = {
  devtool: 'source-map' // 也可使用`eval-source-map`等支持SCSS映射的类型
}

若配置完成后仍不同步，可检查编译生成的.css.map文件中的sources字段，确保路径指向的是你本地的SCSS源文件实际路径。

Chrome DevTools 配置步骤 #

1. 打开DevTools设置（按F12呼出DevTools后点击右上角齿轮图标，或直接按F1快捷键），在「Sources」分类下勾选两个选项：
   • Enable CSS source maps
   • Auto-reload generated CSS
2. 确认Workspace路径映射：进入DevTools的「Sources」面板，找到已添加的本地项目文件夹，右键点击你要修改的SCSS源文件，选择「Map to file system resource」，选中本地磁盘中对应的SCSS文件完成绑定。

正确的修改操作方式 #

不要直接在「Elements」面板的Styles栏修改编译后的CSS规则，需要通过以下两种路径修改SCSS：

• 直接在Sources面板的Workspace文件夹中打开对应SCSS文件，修改后按Ctrl+S（Mac为Cmd+S）保存，改动会直接写入本地SCSS源文件
• 在Elements面板的Styles栏，点击你要修改的样式规则右侧的文件名链接，会自动跳转到对应的SCSS源文件，修改后保存即可

保存SCSS后若你的编译工具开启了热更新，会自动重新编译生成CSS，Chrome也会同步刷新页面样式，无需手动操作。

内容的提问来源于stack exchange，提问作者Ren Jitsm