Skip to content

angular-cli 11's scss source map only shows the file listed in angular.json #19505

@steve3d

Description

@steve3d

🐞 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

any version before angular cli 11 works.

Description

I have a few sites use angular, before angular 11, these sites are complex sites with backends. So I use ng build --watch --source-map --named-chunks to develop the sites, everything works great, but after I upgrade to angular 11, all my scss source-map are wrong, my sites use bootstrap's scss, before upgrade, every project can show the exact source of any css rule. but after upgrade, all rules are come from the same scss file which is listed on angular.json.

I've searched the issues, seems no one have my problem?

here is my angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "cbp": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "resources/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "public/bundles",
            "deployUrl": "bundles/",
            "index": "resources/src/index.html",
            "main": "resources/src/main.ts",
            "polyfills": "resources/src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "sourceMap": true,
            "assets": [
              "resources/src/favicon.ico",
              "resources/src/assets"
            ],
            "styles": [
              "resources/sass/style.scss",
              "resources/src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "resources/src/environments/environment.ts",
                  "with": "resources/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "cbp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "cbp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "cbp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "resources/src/test.ts",
            "polyfills": "resources/src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "resources/src/favicon.ico",
              "resources/src/assets"
            ],
            "styles": [
              "resources/src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "cbp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "cbp:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "cbp"
}

and here is my problem, all css rules are from the styles.scss, this is the scss from my templates, not the style.scss from angular.
截屏2020-11-30 11 03 09

🔬 Minimal Reproduction

ng new test-app
cd test-app
npm i -D bootstrap
// now add "node_modules/bootstrap/scss/bootstrap.scss", to styles of angular.json
ng serve
// open localhost:4200, and check, every rule related to bootstrap are all come from bootstrap.scss file

🌍 Your Environment


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 11.0.2
Node: 14.15.1
OS: darwin x64

Angular: undefined
...
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1100.2 (cli-only)
@angular-devkit/core         11.0.2 (cli-only)
@angular-devkit/schematics   11.0.2 (cli-only)
@schematics/angular          11.0.2 (cli-only)
@schematics/update           0.1100.2 (cli-only)
webpack                      5.9.0

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions