Ionic2 - How to import css files for a page component

Question

I have to import some stylesheets residing inside node_modules (bootstrap.css from node_modules, etc). I tried by

adding styleUrls inside @Page,
putting the styles in the .scss file inside the page component folder,
and finally putting the styles inside the template file itself by creating new style tag... all with no luck, i.e the required styles are not getting applied on tags with appropriate classes.

How to do this ?

PN: I had imported the page scss for my components in app.core.scs. Anyways, I think putting bootstrap.min.css inside page scss is not a good way

This may or may not help but if you add the styles into a .scss file you still need to import the file into app.core.scss via the @import decorator. Ionic will use app.core.scss and all .scss file imported into it when building the project. but they must be imported — Pat Murray
– Pat Murray, Commented Mar 24, 2016 at 4:17
If your talking about global styles applied to your whole app that come from node_modules, you just want to include these as regular stylesheets in your index.html. Is there a reason you don't want to do that? — Rob Louie
– Rob Louie, Commented Mar 30, 2016 at 20:09

Russ · Accepted Answer · 2016-10-27 15:03:49Z

9

Adding the above import doesn't seem to work in the latest version of Ionic2 (ionic -version = 2.1.4) that I installed on 10/25/16. There is no longer an app.core.scss file in newly created projects. But rather just variables.scss in src/app/theme.

There is a file app.scss in src/app that says it's for global SASS and importing other files, but adding an import for another page does not seem to make a difference.

I have a page /src/app/pages/about, in which I have about.ts that has styleUrls: ['about.scss']. The file about.scss is in the same directory. Putting @import "../pages/about/about"; at the bottom of that file makes no difference.

UPDATE:

I have finally got it to work with this in about.ts:

styleUrls: ['/pages/about/about.scss']

I'm not sure if this is the best way yet, but it works for now.

edited Oct 27, 2016 at 15:03

answered Oct 26, 2016 at 21:40

Russ

6418 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fabio says Reinstate Monica Over a year ago

Does the word "this" at the very beginning of your post refer to kipcakbegi's answer? Then you should remember that this is a Q&A site, not a forum. Answers are ordered based on their score. If your answer had a higher score, it would show up first, and then, to anyone reading it, "this" would make no sense. So please edit your answer and add a link to the post you refer to, as I have done. Thank you!

Nirmal Over a year ago

You are really a life saviour .I was searching whole day but could not able to find the line and any doc mentioned about this change.

kipcakbegi · Accepted Answer · 2016-05-28 19:52:55Z

3

@import "../pages/yourpage/yourpage"

Add this line in app/themes/app.core.scss and rebuild. Of course change yourpage expression.

answered May 28, 2016 at 19:52

kipcakbegi

463 bronze badges

Collectives™ on Stack Overflow

Ionic2 - How to import css files for a page component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related