如何使构建过程不将所有 .scss 文件编译成 main.css答案

【问题标题】：How to make the build process not compile all .scss files into a main.css如何使构建过程不将所有 .scss 文件编译成 main.css
【发布时间】：2023-01-13 02:08:48
【问题描述】：

我所有的各种组件都有一些 .scss 文件，这些文件最终会合并到一个 main.css 中，这使得调试变得困难，因为 Chrome 开发者控制台没有对源 scss 的反向引用，例如 component1.scss

出于调试运行的目的，是否可以将各种 .scss 文件分开保持不变？

考虑以下来自 Chrome Dev 的快照。控制台，我可以猜到像 ChannelEntryComp 这样的样式是从哪里来的，但是我对像“label”、“input”这样的样式一无所知，也许，它们可能已在我的项目中有意或无意地在不同的 .scss 中重新定义，从而对最终结果产生副作用。

这是我当前用于浏览器构建的构建命令行，是否有我可以在此处或其他地方指定的参数？：

ionic serve --no-open --allow-file-access-from-files --target cordova

就在我认为我理解 CSS 的时候，一周后出现更多损坏的渲染让我感到惊讶。

如果有 CSS 工具或扩展你希望我考虑，请分享。

把我当成新手。

仍在使用离子 3 :(

谢谢你。

i
TypeScript version
Version 4.3.5

Ionic:

   Ionic CLI          : 6.13.1 (C:\Users\AXM\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 10.1.2, browser 5.0.3
   Cordova Plugins   : cordova-plugin-ionic-webview 4.1.3, (and 15 other plugins)

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (C:/Users/AXM/AppData/Local/Android/Sdk)
   NodeJS            : v12.9.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10

我的 launch.json 配置文件包含“sourceMaps”：true

【问题讨论】：

标签： css sass ionic3

【解决方案1】：

在本地环境中进行测试时，如果保留源映射文件，您将能够看到所需的引用（行号和文件名）。

https://sass-lang.com/documentation/cli/dart-sass#source-maps

请注意：这取决于构建过程的其余部分。我不建议在开发过程中运行缩小器或清除工具（除非需要），因为这会导致像你这样的问题

【讨论】：

“如果您将源文件留在其中”是什么意思？我的 launch.json 配置文件有“sourceMaps”：是的，我不知道在构建过程中的什么地方可以用参数 --no-source-map 调用 sass，非常感谢你的见解。谢谢你。