使用Chrome DevTools编辑SCSS在Ionic项目中不起作用

Question

对于Web项目，我总是使用Chrome DevTools在本地修改页面的CSS，而无需重新加载。似乎这在我的ionic4项目中不起作用，仅通过ionic serve服务该页面。我可以在devtools的Sources-> Page部分中看到要编辑的源文件，但是当我在此处进行修改时，在实时页面中看不到更改。

请参见下图：

在开发工具中，我想更改＃play-pause，可以说添加一个更大的边距，例如margin-top：20px。如果我在Chrome DevTools中进行编辑，则看不到任何更改。但是，如果我转到IDE，在此处进行相同的CSS更改并保存，那么ionic dev服务器将自动重启，并且CSS更改将生效。

如果有人有任何线索或尝试的方法，请告诉我，谢谢！

Answer 1

看看这篇文章：Sass Source Maps + Chrome = Magic

另请参阅：

• I want to edit my sass file from Chrome dev tool from element tab, is that possible?
• How to make CSS sourcemapping work in Chrome with Compass (SASS)