如何为Angular 6应用程序启用CSS源映射? [英] How to enable CSS sourcemaps for Angular 6 application?

问题描述

如何在Angular 6应用程序中为CSS文件启用源地图?

How do I enable sourcemaps for CSS files in my Angular 6 application?

我正在SCSS文件中定义样式源代码，这些文件随后由Angular CLI编译为CSS.但是，在样式调试期间，无法在浏览器中看到原始源代码.所有样式都指向<style>...</style>块.

I'm defining my styles source code in SCSS files, which are later compiled to CSS by Angular CLI. However, I can't see the original source code in the browser during styles debugging. All styles are pointing to the <style>...</style> blocks.

在调试编译后的代码时，我希望能够看到对原始SCSS文件的引用.

I want to be able to see the references to original SCSS files when debugging the compiled code.

我需要在angular.json文件中设置哪些选项?

What options do I need to set in angular.json file?

我尝试对ng serve命令使用--source-map CLI参数，但是看起来它没有任何影响.两种情况下都会根据webpack编译日志发出Sourcemap文件.

I've tried to use --source-map CLI argument for ng serve command, but it looks like it's not affecting anything. Sourcemap files are emitted in both cases according to webpack compilation log.

推荐答案

来自 https://github.com/angular/angular-cli/issues/9099#issuecomment-388710635

1)修改angular.json以添加--extract-css，在6.0中，此参数已从ng serve中删除

1) modify angular.json to add --extract-css, in 6.0 this argument is removed from ng serve

 "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
       ---
      },
      "configurations": {
        "production": {
          ---
        },
        "serve": {
          "extractCss": true,
           ---
        }
      }
    },

2)然后将serve-> options-> browserTarget-> project-name:build更改为project-name:build:serve

2) Then change serve->options->browserTarget->project-name:build to project-name:build:serve

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "open": true,
        "browserTarget": "<project-name>:build:serve"
      },
      "configurations": {
        "production": {
          ---
        }
      }
    }

3)运行ng serve --source-map

3) run ng serve --source-map

这篇关于如何为Angular 6应用程序启用CSS源映射?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！