App styles not working after updating to version 2.0.4

[ChrisCraig68]

Hi I have just updated from 0.3.47 to 2.0.4 but the styles within 'styleguide-app.css' are incomplete.

It is causing styleguide elements such as the design tool to have no styles attached. I have tried setting the 'includeDefaultStyles' to both true and false but no luck.

[junaidrsd]

Hi @ChrisCraig68, It seems this is only happening to the clean build. I'll have a look when I get time. Thanks

[ChrisCraig68]

Thanks @junaidrsd

[OliverJEvans]

@ChrisCraig68 @junaidrsd I have the same issue, went from 2.0.1 to 2.0.4. Reverting back to 2.0.1 works for now.

[ChrisCraig68]

@OliverJEvans Thanks that worked for me.

[damienwebdev]

I see the same thing. Not sure why this issue got closed, the bug still remains. I'd leave this open until this gets fixed by @junaidrsd 's pull request.

[mikezks]

@junaidrsd, could you please reopen this issue? The problem as mentioned in the initial post still persists. I tested version 2.1.0 (git clone) and 2.0.4 (git clone and npm package) and the styles still do not work. Thanks!

[junaidrsd]

@mikezks I've tested once again with all possibilities and styles are working for me. Can you check by deleting output folder. It should work

[mikezks]

@junaidrsd, thanks for your reply.

It seems to be related to the npm version. In the environment I tried to setup the styleguide today a npm 3.x.x version is allowed only. This seems to be the reason for the wrong styles. I tested it on another PC right now (with npm 5.4.2) and - as you said - everything works fine. Sorry for this confusion, but at least it may be helpful for others as well.

The issue can of course be closed again.

[mikezks]

@junaidrsd, in contrast to what I wrote yesterday I do have the styles issue with npm 5.4.2 as well. It seems to be connected to the browser.

This bug does not occur in IE, edge, Firefox, but in Chrome only. Could you please give me feedback whether you tested successfully with Chrome as well?

I tested with Chrome Version 61.0.3163.100 (Official Build) (64-bit) and Version 60.0.3112.90 (Official Build) (64-bit).

Steps to reproduce:

git clone http://github.com/SC5/sc5-styleguide.git
cd sc5-styleguide
npm install
npm run build
npm run demo

[mikezks]

I think I found a solution resp. workaround:

Chrome does not like this code block:

<script type="text/ng-template" id="userStyles.html">
  <style>
    @import url('{{{appRoot}}}/styleguide.css');
    @import url('{{{appRoot}}}/styleguide_pseudo_styles.css');
    @import url('{{{appRoot}}}/styleguide_helper_elements.css');
  </style>
</script>

But loading it with your addCssLink() function works.

[junaidrsd]

Thanks @mikezks for reporting problems, unfortunately I'm occupied with other things. If you have found a solution just create a PR I'll merge it.

[kasparsd]

@junaidrsd Here is a pull request that fixes the issue #1130.