ng build/serve --prod ignores scss url imports if angular.json contains more than 1 style file

[Maximaximum]

Versions

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


Angular CLI: 6.0.1
Node: 8.9.4
OS: win32 x64
Angular: 6.0.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, http, language-service, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.1
@angular-devkit/build-angular     0.6.1
@angular-devkit/build-optimizer   0.6.1
@angular-devkit/core              0.6.1
@angular-devkit/schematics        0.6.1
@angular/flex-layout              5.0.0-beta.13
@ngtools/webpack                  6.0.1
@schematics/angular               0.6.1
@schematics/update                0.6.1
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

• In the styles.scss file, import a file via url:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); <- here
@import "styles/_var.scss";
@import 'styles/_tables.scss';
...

• Run ng serve --prod

Observed behavior

The https://fonts.googleapis.com/icon?family=Material+Icons file contents are absent in the output bundles.

If we do the same thing on angular v 5.2.0, the file contents ARE in the bundle.
If we do the same thing, but run ng serve without --prod flag, the file contents ARE in the bundle

Desired behavior

The https://fonts.googleapis.com/icon?family=Material+Icons file contents should be present in the output bundle, just like it did in 5.2.0.

Mention any other details that might be useful (optional)

This issue appeared only after I updated angular from v5.2.0 to v6.0.1

[Maximaximum]

I've managed to narrow the issue down. The issue only reproduces if we have more than one non-empty file in projects.architect.build.options.styles setting of angular.json.

In my case, it's:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "admin-web": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "node_modules/normalize.css/normalize.css", <- If I remove this line, or remove all the contents from normalize.css file, everything works as expected
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/moment/min/moment.min.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "admin-web:build",
            "port": 5670
          },
          "configurations": {
            "production": {
              "browserTarget": "admin-web:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "admin-web:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/moment/min/moment.min.js"
            ],
            "styles": [
              "node_modules/normalize.css/normalize.css",
              "src/styles.scss"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": []
          }
        }
      }
    },
    "admin-web-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "admin-web:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "admin-web",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

[sainture]

I'm having the same issue.

"styles": [
"src/styles.scss",
"src/theme.scss"
]
and I have the following imports in my theme.scss file
@import url('//fonts.googleapis.com/icon?family=Material+Icons');
@import url('//fonts.googleapis.com/css?family=Roboto:300,400,500');
@import url('//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

but none of them get loaded.

[alisa-duncan]

Same issue here trying to import google fonts to use with mat-typography.

My angular.json includes my styles as well as primeng.

I first saw this in our build (where we had the --prod flag). When I add --prod to ng serve I can reproduce the problem locally.

I worked around it by importing the primeng css in my styles.scss. 👎

[blackcoffeerider]

Was just about to confirm that error - but it turned out I accidentely inserted the styles in the test section of the angular.js file instead of the build section above! Hope this might help someone in the future with the same problem.

[Syam]

Meet the issue too:

In styles.scss

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

In angular.json

(...)
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
(...)

Roboto font work with ng serve.
Roboto font does not work with ng build --prod.

[alexandrin-rus]

I have the same issue:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,300');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

None of these imports are working when using --prod.

...

"styles": [
    "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss",
    "src/styles.scss"
]

...

[thomassanders]

I have the exact same issue. Multiple styles added in angular.json, and the google font import in my scss files are not in the output css.
It works if I don't use the --prod flag, on ng build / serve.

importing the css files of my package.json directly in my scss files, is not the recommended way to do this sass loader marks this as 'deprecated'.