Source map not working for SCSS files

[rukshandangalla]

Recently I updated cli version 1.3.2 to 1.6.3 and after that I can't see scss source mapped file in developer tools in Chrome of Firefox .

Versions : 1.6.3

Angular CLI: 1.6.3
Node: 8.9.3
OS: win32 x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.6.3
@angular/language-service: 4.4.6
@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.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Repro steps

• Create new angular app using ng new sample-app
• Add scss file in angular-cli.json "styles": ["styles/styles.scss"]
• Launch app using ng serve -sm -ec
• Inspect styles using chrome dev-tools.

Observed behavior

No actual scss file, only style.bundle.css where all the styles compiled.

Desired behavior

Actual scss file can be seen in the developer tools with the line number

[rukshandangalla]

@clydin any update on this?

[michael-letcher]

Source map not working for LESS files

I have the same issue with Less files too.

The component LESS files appear, but the styles brought in via the CLI are not.

Versions

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.40
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack: 3.10.0

[Sadlowski]

Dnia 5 stycznia 2018 04:42 Rukshan Lakshitha Dangalla <[email protected]> napisał(a): Recently I updated cli version 1.3.2 to 1.6.3 and after that I can't see scss source mapped file in developer tools in Chrome of Firefox . Versions : 1.6.3 Angular CLI: 1.6.3Node: 8.9.3OS: win32 x64Angular: 5.0.0... animations, common, compiler, compiler-cli, core, forms... http, platform-browser, platform-browser-dynamic... platform-server, router@angular/cli: 1.6.3@angular/language-service 4.4.6@angular-devkit/build-opt 0.0.36@angular-devkit/core: 0.0.22@angular-devkit/schemati 0.0.42@ngtools/json-schema: 1.1.0@ngtools/webpack: 1.9.3@schematics/angular: 0.1.11@schematics/schematics: 0.0.11typescript: 2.4.2webpack: 3.10.0 Repro steps Create new angular app using ng new sample-app Add scss file in angular-cli.json "styles": ["styles/styles.scss"] Launch app using ng serve -sm -ec Inspect styles using chrome dev-tools. Observed behavior No actual scss file, only style.bundle.css where all the styles compiled. zasobygwp.pl Desired behavior Actual scss file can be seen the developer tools with the line number zasobygwp.pl — You are receiving this because you are subscribed to this thread. Reply to this email directly, zasobygwp.pl view it on GitHub , or zasobygwp.pl mute the thread .

[michael-letcher]

I've found that it is actually working for me, but just not for Bootstrap.

We're building bootstrap manually and therefore not using the default bootstrap.less found in the LESS folder.

[smlombardi]

It does not show references to my project's scss files nor to bootstrap 4's scss files. Only to styles.bundle.css.

[michael-letcher]

My issues is with Bootstrap 3 and LESS

I've got a bootstrap.less (copy from ~/bootstrap/less/bootstrap.less) in my app folder that I've added to the angular-cli.json

Which when I run ng serve -sm -ec -env=mock shows source maps for my components but not for my complied global less files imported from the angular-cli.json

So the fix they mention about removing ~ will not work for me...

[smlombardi]

I am not even using ~ we use:

      "styles": [
        "../node_modules/prismjs/themes/prism.css",
        "../node_modules/@ngx-loading-bar/core/loading-bar.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "sass/designsystem/designsystem.scss",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.slim.js",
        "../node_modules/popper.js/dist/umd//popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

The css is complied and works for all of these, but no source maps.

[michael-letcher]

@smlombardi Yeah, seems like a bug from at least 1.6.2 onwards

[dhvidding]

I've had this problem from 1.5 onwards

[rukshandangalla]

As I can see many folks have this issue. What can we do about this?

[michael-letcher]

1.6.5 didn't solve the issue for me. (LESS)

[smlombardi]

This is making it very hard to work and debug css styling issues.

[anthonyartese]

Same issue here when I upgraded from 1.4.7 to 1.6.5. Please fix, this is a major blocker!

[smlombardi]

Still not working in 1.6.6, FWIW.

[kamuran21]

I have same issue, and still wait for fixing. This is a critical issue, it blocks rapid development.

[dmijatovic]

This is main reason why I am still using Angular 4 and cli 1.4.x in production and not upgrading to Angular 5.

[CharltonC]

Some Context:

• using angular-cli version 1.6.6
• project is generated by the CLI.
• using Scss

I remembered it was a weird thing in Webpack config where I had to add extra config to allow sourcemap (in addition to the plugin config).

Solution:
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   

[smlombardi]

@chaeusler Not working for me, 1.6.7

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve has an unknown property 'devtool'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }

[dmijatovic]

Proposed solution by @CharltonC works for me on v1.6.3 and v1.6.7 (two test projects I happen to have now). I am using scss @imports for bootstrap and material in styles.scss and I have proper source maps now. Exactly what I need. Thanks CharltonC!

[smlombardi]

@chaeusler @dmijatovic Am I missing something? When I add the line recommended, I get the above error, in short configuration.resolve has an unknown property 'devtool'

This is a standard install of 1.6.7

[dmijatovic]

@smlombardi, it looks like your devtool definition is not at right level of configuration. Examine the structure of return {...} @CharltonC provided. The exact line number in the common.js file may vary. I hope this helps.

[rukshandangalla]

@CharltonC thanks for the workaround. Can we expect any kind of fix from the angular team?

[michael-letcher]

@CharltonC It worked for me.

CSS Preprocessor: LESS

Version:

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

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.16
typescript: 2.6.2
webpack: 3.10.0

[cedriccjmusic]

Sourcemapping for Component-level SCSS Files

Can you confirm, @metasong, @frensuren, @CharltonC, @rukshandangalla, @michael-letcher?

Suprisingly, the following solution works without any configuring of Angular 6's angular.json file.

Simply add /*# sourceURL=your-comp-style.component.scss */ to the bottom of your component-level .scss file.

Code

Run

ng serve --source-map

Result in Chrome

[michael-letcher]

@cedriccjmusic

Source mapping for Component-level

Can confirm that adding /*# sourceURL=navbar.component.less */ worked for me.
Note this is using LESS

Source mapping for General (Non-component level)

I don't need to do this, LESS seems to work by just using --source-map

[daddyschmack]

This is causing an error for me:

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(extractsCss).

[ajspera]

The sourceURL= solution helps at least tell you the file, but still is far from ideal. It references generated css, so line numbers do not match up and any imported styles will show as belonging to the importing file.

@daddyschmack you have a typo, it should be extractCss and not extractsCss, although I was trying this method with a new angular project and its not working with the last couple cli versions.

[ajspera]

I found the source of the issue within the @angular-devkit/build-angular package.

You can temporarily fix this yourself editing changing the sourcemap option for both instances of postcss-loader in the following file
./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/styles.js
change

sourceMap: cssSourceMap

to

sourceMap: cssSourceMap ? 'inline' : false

    const rules = baseRules.map(({ test, use }) => ({
        exclude: globalStylePaths, test, use: [
            { loader: 'raw-loader' },
            {
                loader: 'postcss-loader',
                options: {
                    ident: 'embedded',
                    plugins: postcssPluginCreator,
                    sourceMap: cssSourceMap ? 'inline' : false
                }

I'll file an issue with the @angular-devkit/build-angular repository.
edit: ah that package is in this repo, ha. I submitted a pull request with the fix.

[spike1292]

@cedriccjmusic thanks for the example!

Sadly isn't working for me with Angular cli 6.1

I get the following result:

Versions

Angular CLI: 6.1.2
Node: 8.11.1
OS: darwin x64
Angular: 6.1.1
... animations, common, compiler, core, forms, http
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.2
@angular-devkit/build-angular     0.7.2
@angular-devkit/build-optimizer   0.7.2
@angular-devkit/build-webpack     0.7.2
@angular-devkit/core              0.7.2
@angular-devkit/schematics        0.7.2
@angular/cli                      6.1.2
@angular/compiler-cli             6.1.2
@angular/language-service         6.1.2
@ngtools/webpack                  6.1.2
@schematics/angular               0.7.2
@schematics/update                0.7.2
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.9.2

Config

{
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ....
        "stylePreprocessorOptions": {
          "includePaths": [
            "styles/core-scss"
          ]
        },
        "assets": [
          ....
        ],
        "styles": [
          "apps/essent/src/core.scss"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          ....
        },
        "css": {
          "sourceMap": true,
          "extractCss": true
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "essent:build",
        "port": 4200
      },
      "configurations": {
        "production": {
          "browserTarget": "essent:build:production"
        },
        "css": {
          "browserTarget": "essent:build:css"
        }
      }
    }
  }

Commands

Getting the same result with build & serve

yarn ng build essent --source-map --extract-css
yarn ng serve essent --proxy-config proxy.conf.js --configuration css --source-map

[lazysergey]

@ajspera this won't fix angular-cli 1.7.4, am I right? only new 6.x.x?

[ajspera]

@lazysergey Right. You might want to try #issuecomment-392316835 who had a hack working for 1.7.4. I would recommend getting up to 6, though. The next minor patch should have the fix in.

[BenRacicot]

@ajspera were you able to get smaps to work? Is there somewhere I could read up on how to get them to work properly? I've never actually seen them work in Angular.

[ajspera]

@BenRacicot Hmm, they said it would be in this past patch release but I don't see the commit in branch 6.2.x. It's on master, so it's in the maintainers' hands at this point. If you are desperate, you can make the changes from the commit mentioned above in your installation's source. It's only 2 lines.

[BenRacicot]

Awesome thanks for replying.

[ritwickdey]

Still sourceMap / extractCSS is not working for component specific styles

"@angular-devkit/build-angular": "^0.6.8",
"@angular/cli": "^6.0.8",

[waqasdotnet]

@metasong's solution is working for Angular 6+ projects

[camsong]

Any update on this? @metasong's solution doesn't work on component style.
Pls support LESS source map!!! This is suck a basic feature.

[camsong]

@clydin @hansl guys, I believe this is not fixed in version 7.1.0, why close this issue?

[imkremen]

@camsong It works fine for me in version 7.0.4
This issue only about SCSS source maps.

[JWess]

It's working for me on version 7.0.3.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}