Unable to apply nebular styles to any component

[ilDon]

Issue type

I'm submitting a ...

• [ X] bug report
• [ ] feature request

Issue description

Current behavior: I have an existing project in which I want to add nebular components.

I have successfully added a stepper, but none of the Nebular styles are applied to any element of the stepper (including buttons).

I have followed the instructions on how to integrate the styles, but it is not working as expected. The bootstrap styles do work as expected.

I've also tried to manually add the bundled css file to index.html, but it does not work anyways.

Finally, I've also started from scratch with the ngx-admin starter app, and I've imported all stylings from that project (where styling was working). Still Nebular components are not styled in the project in which I would like to integrate Nebular.

Expected behavior: Following the step-by-step guide on how to integrate Nebular should result in the styles properly applied.

Steps to reproduce:

1. Start a new project with ng new my-project. Add Bootstrap and NgBootstrap.

2. Import all bootstrap style as scss in a styles.scss file, and add such styles.scss file to angular.json.

3. Follow the step by step guide on how to integrate Nebular in an existing project.

Related code:

https://stackblitz.com/edit/angular-nebular-integration

I've added the stepper and the button, and none of the elements is properly styled.

Other information:

See the stackblitz example.

Angular, Nebular

v. 2.0.0-rc.10

[nnixaa]

Hi @ilDon, have you followed the documentation here https://akveo.github.io/nebular/docs/guides/add-into-existing-project#create-a-page? The NbLayoutComponent is a required one for styles to apply.

[ilDon]

Hi @nnixaa , yes I have added NbLayoutModule to the imports, you can check also in the stackblitz example: https://stackblitz.com/edit/angular-nebular-integration?file=src%2Fapp%2Fapp.module.ts.

[ilDon]

Sorry, quick follow-up. I did not include the NbLayoutComponent, I have only imported the NbLayoutModule, which is the one mentioned in the documentation. Did you mean NbLayoutModule, or should I also include the NbLayoutComponent?

If the the NbLayoutComponent is required, I have looked at the documentation, but I could not find any reference to it.

[nnixaa]

Hi @ilDon, I meant that you need to add the layout component to your template like this:

    <nb-layout>
      <nb-layout-header fixed>Company Name</nb-layout-header>

      // THEN NEBULAR COMPONENTS HERE

      <nb-layout-column>Page Content</nb-layout-column>
    </nb-layout>

We will update the docs to state this more clearly.

[ilDon]

Ah ok thanks!

[gcampecino]

@nnixaa , mine is not working as well. the css "node_modules/@nebular/theme/styles/prebuilt/default.css" cannot be access directly in the browser url as well..so something is wrong with css public access no ?

[ghost]

Hi there! I was following your guide to add the nebular theme to my project and create a page! I installed nebular using the angular CLI as suggested in this doc -> https://akveo.github.io/nebular/docs/guides/install-nebular#using-angular-cli and I successfully created the page while following this doc -> https://akveo.github.io/nebular/docs/guides/create-nebular-page#create-nebular-page.

While the page got created the styles were not applied to the text as shown in the docs! Could you please point me in the right direction if i have to install the styles seperately? Thanks in advance!

[sai-github]

Installing via angular/cli works fine for me. I did 2 simple mistakes

• removed <nb-layout></nb-layout> after cli added it by default in my app.component.ts
• changed the theme in NbThemeModule.forRoot({ name: 'default' }), and and also changed css path in angular.json

To make it work like normal

• I added back <nb-layout></nb-layout>
• I restarted my server to take account of the new css theme change

Hope it may help someone who is starting to use nebular

[chrisrouw]

I ran into this issue as well. What worked for me was to wrap the nebular component (e.g. nb-chat) with a div that has a class of nb-theme-default. In looking at the css file, I noticed the styles were prefaced with nb-theme-default, so thought I would give it a try. It's working for now.

<div class="nb-theme-default">

The other thing I tried that worked best was to run ng add @nebular/theme to install the package into my existing project.

Hope that helps.

[nikita-fuchs]

<div class="nb-theme-default">

this saved me ! Thank you so much !

[koczokok]

@nnixaa hello, is there any development regarding this issue, I am using nebular with jhipster and without <div class="nb-theme-default"> I can't get my styles to work is there any other way, beacause it is pretty cumbersome to use this all the time