在开发工具上使用Ionic时无法查看scss文件 [英] Cannot view scss files while working with Ionic on dev tools

问题描述

我正在尝试从Ionic网站上获得一些非常基本的离子教程（离子教程），我希望能够从开发工具中查看和修改scss。

I'm trying out some very basic Ionic tutorials from Ionic website (Ionic Tutorial), and i want to be able to view and modify scss from dev tools.

应用程序正常运行，我添加的css类scss文件也正常工作但我看到一个main.css文件而不是编译它的foo.css。我甚至可以在开发工具和调试上查看打字稿文件，这意味着 js-> ts的源地图正在工作。它是 css-> scss无法正常工作。

The app functions correctly, css classes i've added in scss files work correctly as well but i see a main.css file instead of the foo.css from which it was compiled. I can even view typescript files on dev tools and debug, which means source map for js->ts is working. It's the css-> scss that's not working.

我可以在www / build上看到这些文件

I can see these files on www/build

• main.js


• main.map.js


• main.css


• main.map.css

• main.js
• main.map.js
• main.css
• main.map.css

这意味着正确生成源地图。
我还从
启用了chrome中的css源地图 - DevTools - >设置 - >源代码 - >启用CSS源地图

Which means the source map is generated correctly. I have also enabled css source maps in chrome from - DevTools -> Settings ->Sources -> Enable CSS source maps

推荐答案

我会把它标记为重复，但似乎我不能。答案可以在这篇SO帖子上找到在此输入链接说明。基本上，

I would mark this as duplicate but it seems like i cannot. Answer can be found on this SO postenter link description here. Basically,

您需要扩展sass.config.js文件，默认情况下，sass的源映射已禁用。

You'll need to extend your sass.config.js file, by default source mapping for sass is disabled.

config / sass.config.js：

config/sass.config.js:

module.exports = {
  sourceMap: true,
}

package.json：

package.json:

"config": {
  "ionic_sass": "./config/sass.config.js",
}

我可以验证这是否有效。

I can verify that this works.

这篇关于在开发工具上使用Ionic时无法查看scss文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！