Angular CLI no sourcemaps for LESS / SASS

Question

运行 ng serve css按预期放置在 <style>标签中。

运行ng serve -ec CSS保存在其捆绑styles.bundle.css

中

运行ng serve -ec -sm CSS仍然仅在捆绑包中显示，并且似乎没有创建Sourcemaps。

注意：我们使用的少量。

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

Answer 1

这是由于Angular CLI的问题自v1.3.2以来已被打开和关闭，目前仍然截至v1.7.x

做了更多的挖掘＆amp;比较WebPack配置文件，发现新CLI正在使用webpack插件" RAW-LOADER"，该插件尚未支持SourceMap（以某种方式关闭了票证，但我不确定是否已实现了SourceMap）。

>）。

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

在" node_modules@angular cli cli cli webpack-configs common.js"文件中，在第162行中，在getCommonconfig函数中的返回的commun configuration对象中添加line 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