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

Answer 1

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.