在开发工具上使用 Ionic 时无法查看 scss 文件

Question

我正在尝试 Ionic 网站 (Ionic Tutorial) 上的一些非常基础的 Ionic 教程，我希望能够从开发工具中查看和修改 scss。

该应用程序正常运行，css 类我在 scss 文件中添加的文件也正常运行，但我看到 main.css 文件而不是 foo.css 从中编译。我什至可以在开发工具和调试上查看打字稿文件，这意味着 js->ts 的源映射正在工作。 css-> scss 不起作用。

我可以在 www/build

上看到这些文件

说明source map生成正确。我还在 chrome 中启用了 css source maps from - DevTools -> Settings ->Sources -> Enable CSS source maps

Answer 1

我想将其标记为重复，但我似乎不能。可以在这个 SO post 上找到答案。基本上，

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

config/sass.config.js:

module.exports = {
  sourceMap: true,
}

package.json:

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

我可以验证这是否有效。

Cannot view scss files while working with Ionic on dev tools