Angular CLI 没有 LESS 的源映射/SASS

Question

运行 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

Answer 1

这是由于 Angular CLI 自 v1.3.2 起断断续续的问题，目前从 v1 起仍然断断续续。7.x

Did a little more digging & comparing the webpack config file, found that the new CLI is using Webpack plugin "raw-loader" which does not yet support sourcemap (somehow the ticket has been closed but I am not sure if the sourcemap has been implemented).

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

In "node_modules@angular\cli\models\webpack-configs\common.js" file, in line 162, Add a line devtool: 'source-map', in the returned common configuration object in the getCommonConfig function, e.g.

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

Tested with the following Commands in terminal (also works with 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

Angular CLI 没有 LESS 的源映射/SASS

Angular CLI no sourcemaps for LESS / SASS

css

sass

less

angular-cli

angular