Chrome DevTools：SASS源文件不会保存在磁盘上 [英] Chrome DevTools: SASS source file doesn't get saved on disk

问题描述

我按照Gogle提供的说明设置了源图：

要在Chrome DevTools中编辑源文件，需要：

1. 将项目文件夹添加为工作区（DevTools - Settings - Workspace - Add文件夹）


2. 将webserver提供的源文件映射到本地文件：
   

$ b Ctrl +点击任何CSS属性打开服务的源。在源文件树中，右键单击文件并选择映射到网络资源。

如果您希望Chrome在更改源文件时自动更新网站，请不要忘记启用自动重新加载生成的CSS在常规选项卡中。

I followed the instructions provided by Gogle to setup sourcemaps: https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

The sourcemaps are working, and I can see the .scss source link in the "Elements tab".

But I have two issues:

1 - When I edit the CSS properties in the "Elements tab" the link to .scss breaks up and DevTools shows link to the compiled .css file.

2 - When I ctrl-click on the CSS property in the "Elements" tab, the "Sources" tab opens successfully to show the corresponding .scss file. When I change the file inside the DevTools and try to save it - DevTools says that the file is saved, but it doesn't actually get saved on disk (seems like it gets saved somwhere else). So the sass watch doesn't update the .css because the .scss file doesn't actually get saved on disk.

I am using:

-Chrome 33.0.1750.154 m

-Sass 3.3.4

-SimpleHTTPServer

解决方案

Found the answer in the article: https://medium.com/what-i-learned-building/b4daab987fb0

To be able to edit source files in Chrome DevTools one needs to:

1. Add project folder as a Workspace (DevTools - Settings - Workspace - Add folder)
2. Map the source file provided by webserver to the local file:

Ctrl+click on any css property to open the served source. In the Sources tree right-click on the file and choose "Map to network resource".

Chrome seems to automatically map all other resources in the folder. Now you can live-edit source files from DevTools.

If you want Chrome to automatically update website when changing source files, don't forget to enable the "Auto-reload generated CSS" in General tab.

这篇关于Chrome DevTools：SASS源文件不会保存在磁盘上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！