Chrome DevTools: SASS源文件不会保存在磁盘上

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

我按照Gogle提供的指令来设置源程序:https://developers.google.com/chromedeveloper -tools/docs/css-preprocessor

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

sourcemaps正在工作，我可以在“Elements”选项卡中看到.scss源链接。

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.

1 -当我在“元素标签”中编辑CSS属性时，链接到.scss断开，DevTools显示链接到已编译的. CSS文件。

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.

2 -当我按下“Elements”选项卡中的CSS属性时，“Sources”选项卡将成功打开，显示相应的.scss文件。当我在DevTools中更改文件并试图保存它时——DevTools说文件被保存了，但是它实际上并没有保存在磁盘上(看起来它被保存在其他地方)。所以sass手表不会更新。css，因为。scss文件实际上不会保存在磁盘上。

I am using:

我用:

-Chrome 33.0.1750.154 m

专门33.0.1750.154米

-Sass 3.3.4

3.3.4 sass

-SimpleHTTPServer

-SimpleHTTPServer

1 个解决方案

#1

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

在本文中找到了答案:https://medium.com/what-i-learne -build /b4daab987fb0

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

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

1. Add project folder as a Workspace (DevTools - Settings - Workspace - Add folder)
2. 添加项目文件夹作为工作空间(DevTools - Settings - Workspace - Add文件夹)
3. Map the source file provided by webserver to the local file:
4. 将webserver提供的源文件映射到本地文件:

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".

按Ctrl+单击任何css属性打开服务源。在源代码树中，右键单击文件并选择“映射到网络资源”。

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

Chrome似乎会自动映射文件夹中的所有其他资源。现在您可以从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在修改源文件时自动更新网站，请不要忘记在General选项卡中启用“自动重载生成的CSS”。