CSS not working when bundled

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.3.2
node: 6.11.0
os: win32 x64
@angular/animations: 4.3.6
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

Repro steps.

In command lines:

npm install -g @angular/cli@1.3.2
npm install -g http-server@0.10.0
ng new test-project
cd test-project
npm install popper.js@1.12.5
npm install jquery@3.2.1
npm install boosted@4.0.0-beta.1

Open ./.angular-cli.json and edit the styles and scripts attributes this way:

"styles": [
    "../node_modules/boosted/dist/css/orangeHelvetica.css",
    "../node_modules/boosted/dist/css/orangeIcons.css",
    "../node_modules/boosted/dist/css/boosted.css",
    "styles.css"
],
"scripts": [
    "../node_modules/jquery/dist/jquery.slim.js",
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/boosted/dist/js/boosted.js"
]

Open ./package.json and add the following to the scripts attribute:

"build:prod": "ng build --target=production --environment=prod",
"build:prod:noextract": "ng build --target=production --environment=prod --extract-css=false"

Open ./src/app/app.component.ts, replace the content with:

<p class="text-primary">.text-primary</p>

In command lines:

npm run build:prod
cd dist
http-server

Open your browser at http://127.0.0.1:8080/, notice that the text isn't colored.
In command lines:

cd ..
npm run build:prod:noextract
cd dist
http-server

Open your browser at http://127.0.0.1:8080/, notice that the text is now colored (cache refresh in your browser might be needed)

The log given by the failure.

N/A

Desired functionality.

The Boosted package that I use in the repro steps is a proprietary fork of Bootstrap, and for some reason it works perfectly fine when the CSS is inside the HTML file (extract-css option set to false) and not at all when it is bundled. I can't manage to reproduce this issue with simpler CSS files. I'm really confused as to what causes this, and putting the CSS into the HTML isn't really acceptable in production.
Thanks in advance for your attention.

Mention any other details that might be useful.

N/A

[filipesilva]

That's an odd problem. It might be related to a bug somewhere in the CSS pipeline. Can you try using @angular/cli@1.4.0-rc.2 and see if you still have the problem? We've updated webpack and plugin versions and that might have fixed it.

I just tried with @angular/cli@1.4.0-rc.2, but unfortunately, the behavior is exactly the same.

[clydin]

This can be replicated after the initial project setup with ng serve --extract-css.
After some experimentation, it seems that removing the orangeIcons stylesheet or moving it after boosted fixes the problem. Something within the orangeIcons stylesheet appears to be blocking anything after it.

Indeed, @clydin is right, moving the orangeIcons at the end seems to fix it. I don't know what's wrong with this CSS file.
As far as I am concerned, this issue is fixed, since I have a workaround, and apparently this orangeIcons CSS is going to be removed from the Boosted package (cf. issue 68 of the Boosted Github).

I let you decide if the present issue is to be closed or not, I can't tell if there is something wrong with angular-cli in the end or not...

Regards.

[crtl]

I had the same error since using angular-cli and couldnt fix it. Today I finally found out that I was sending the wrong Content-Type (text/x-c++ instead of text/css) for the css file.
Maybe this will help you.

[phil123456]

so is this fixed ?
I try to use the angular-cli.json to add external css , but they do not load at all

"styles": [
        "styles.css",
        "../node_modules/ng2-toasty/style-default.css"
      ],

[clydin]

Closing this issue as the original concern was addressed. If any other stylesheet related issues are outstanding, please consider opening a new issue with full details regarding the project.

[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.}