Angular-cli: --extract-css not working

[chriseugenerodriguez]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

not able to extract css from build script.

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "d"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        { "glob": "**/*", "input": "./assets/", "output": "./assets/" },
        { "glob": "favicon.ico", "input": "./", "output": "./" }
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/@progress/kendo-theme-default/dist/all.css",
        "./css/main.scss"
      ],
      "scripts": [   
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
    }
  }
}

package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve --port 4201",
    "sass-lint": "sass-lint -c sass-lint.yml -v -q",
    "ts-lint": "ng lint --type-check --force",
    "lint": "npm run sass-lint && npm run ts-lint",
    "build": "ng build --prod --extract-css",
    "test": "ng test",
    "e2e": "ng e2e",
    "precommit": "npm run lint",
    "prepush": "npm e2e"
  },

[clydin]

Please provide the console output resulting from the build command execution.
Also, '--prod' automatically enables style sheet extraction.

[chriseugenerodriguez]

I tried it with aot, prod, and ec in ng build command, still same thing.

C:\Users\ChrisR\OneDrive - PHENOMENEX\a>ng build
Hash: 0850dd15922f0d56ce57
Time: 24521ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 226 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 584 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 6.39 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

[filipesilva]

@premiumwd the console output you provided isn't using --extract-css. Can you try ng build --extract-css and paste the output here?

[clydin]

To run the package script shown above, you'll want to use npm run build. ng build defaults to a development build (which does not extract stylesheets).

[chriseugenerodriguez]

@clydin that isnt it.

C:\Users\ChrisR\OneDrive - PHENOMENEX\a>npm run ng build

> [email protected] ng C:\Users\ChrisR\OneDrive - PHENOMENEX\a
> ng "build"

Hash: 350832e2f476f768879f
Time: 25627ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 226 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 585 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 6.39 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

[chriseugenerodriguez]

@filipesilva interesting why I can't put it in the script command itself, it has to be outside script command and added to it, thanks. If you can not require that, that would be awesome! 👍

[clydin]

Take out the 'ng'. What that is doing is running the 'ng' package script with an argument of 'build' which is the equivalent of 'ng build' by itself.
You want to run the 'build' package script so the command would be 'npm run build'.

[filipesilva]

@premiumwd you're confusing the npm run command https://docs.npmjs.com/cli/run-script with the ng command - they are quite different.

What you want to be using is the ng commands with the flags. To use the commands you set in package.json, use npm run SCRIPT_NAME - but don't mix the two :D

[angular-automatic-lock-bot[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._}