Angular CLI 没有 LESS / SASS 的源图答案

【问题标题】：Angular CLI no sourcemaps for LESS / SASSAngular CLI 没有 LESS / SASS 的源图
【发布时间】：2018-06-04 22:48:17
【问题描述】：

运行ng serve，CSS 会按预期放入<style> 标签中。

运行ng serve -ec，CSS 保存在它的包中styles.bundle.css

运行ng serve -ec -sm，CSS 仍然只显示在包中，似乎没有创建任何源映射。

注意：我们正在使用 LESS。

Angular CLI: 1.6.2
Node: 6.11.2
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

【问题讨论】：

标签： css angular sass less angular-cli

【解决方案1】：

这是由于 Angular CLI 的问题自 v1.3.2 以来一直被中断，目前在 v1.7.x 时仍被中断

做了更多的挖掘和比较 webpack 配置文件，发现新的 CLI 正在使用 Webpack 插件“raw-loader”，它还不支持 sourcemap（不知何故，票已经关闭，但我不确定 sourcemap已实施）。

唯一的选择是降级到 v1.6.6，然后应用@CharltonC 提供的补丁

在“node_modules@angular\cli\models\webpack-configs\common.js”文件第162行，在getCommonConfig函数返回的通用配置对象中添加一行devtool: 'source-map'，例如

...
catch (e) { }
return {
    devtool: 'source-map',        // add this line
    resolve: {
        extensions: ['.ts', '.js'],
         ...

在终端中使用以下命令进行了测试（也适用于 Sass @import）：

ng serve           // no sourcemap
ng serve -sm -ec   // has sourcemap
ng serve --sourcemap --extract-css  // has sourcemap   
ng serve --sourcemap --extractCss   // has sourcemap

https://github.com/angular/angular-cli/issues/9099

【讨论】：