Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How should I link this? #1

Closed
moritzgloeckl opened this issue Oct 13, 2017 · 7 comments
Closed

How should I link this? #1

moritzgloeckl opened this issue Oct 13, 2017 · 7 comments

Comments

@moritzgloeckl
Copy link

Hi,

what's the best practice to link the CSS? My bootstrap.css is a simple link in my index.html I added @import '~ng-bootstrap-to-bootstrap-3/dist/ng-bootstrap-to-bootstrap-3.min.css'; to styles.css.

Are you supposed to link the css like this?

Thanks!
@trumbitta
Copy link
Member

Hi @moritzgloeckl,

since your bootstrap.css is a link in index.html, if you make sure that ng-bootstrap-to-bootstrap-3.min.css ends up after bootstrap.css in the cascade, it should be fine.

@moritzgloeckl
Copy link
Author

Hi @trumbitta ,

thanks for the fast reply, when I'm using

<link rel="stylesheet" type="text/css" href="~ng-bootstrap-to-bootstrap-3/dist/ng-bootstrap-to-bootstrap-3.min.css">`

it's not working. I thought maybe there's a better way than importing it in the style.css? How are you importing it?

@trumbitta
Copy link
Member

Can you post your non-working styles.css and your index.html so I can take a look at it?

@moritzgloeckl
Copy link
Author

This is working:

--- index.html
<head>
  <link rel="stylesheet" type="text/css" href="https://bootswatch.com/flatly/bootstrap.min.css">
</head>
--- styles.css
@import '~ng-bootstrap-to-bootstrap-3/dist/ng-bootstrap-to-bootstrap-3.min.css'; 
body {
 ....

This isn't working:

--- index.html
<head>
  <link rel="stylesheet" type="text/css" href="https://bootswatch.com/flatly/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="~ng-bootstrap-to-bootstrap-3/dist/ng-bootstrap-to-bootstrap-3.min.css">
</head>
--- styles.css
body {
 ....

@trumbitta
Copy link
Member

Oh, ok nice.

The first version, if it's working as intended, should be the preferred one. You installed ng-bootstrap-to-bootstrap-3 via NPM, so it makes sense to import it like that in styles.css - a file that ng cli and Webpack take care of.

@moritzgloeckl
Copy link
Author

Ah ok I see! I thought maybe there's a better way to do it. Thank you very much for your help, and thank you for your work on this.

@trumbitta
Copy link
Member

trumbitta commented Oct 13, 2017 •
edited
Loading

You could also directly use the .scss file(s), and let Webpack compile everything at build time. You'd have to use bootstrap-sass instead of a pre-compiled Bootstrap for that.

But I think your current setup is already ok as it is :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@trumbitta @moritzgloeckl