Ionic2 - How to import css files for a page component

Ionic Framework ionic-v3
1

I have to import some other 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 ?

2

Make sure you import the .scss files for your components in app.core.scss, i,e:

@import "../pages/home/home";
@import "../pages/page1/page1";
@import "../pages/page2/page2";
3

Yes, I had imported. Anyways, I think putting bootstrap.min.css inside page scss is not a good way

4

:thinking: Copy it to www and add it to index.html

But I don’t understand why you need bootstrap…

5

I wish to have bootstrap-slider in my application and its a dependency.

6

If you want it to be available globally, one option is to add the css file to the entry stanza in webpack.config.js. You will probably also want to add a loader to modules.loader like:

{
  test: /\.css$/,
  loader: 'style!css'
}

If you only need it in a single place, you could probably just require it from there (again, you’ll need the loader to be set up).

1 Like
7

Thanks for the suggestion. Can you please tell in detail about how to require a stylesheet. I have added the loader as you said. Wondering about how to use require to load stylesheet. FYI, I have never used ‘require’. I been doing similar thing with 'import; for loading JS.

8

Here are the webpack docs.

9

Finally got an answer to this!! Found it over here: https://github.com/ionic-team/ionic/issues/9422
This works for CSS and JS
1- Install latest ionic
2- Start your project
3- Go to /src/
4- open the assets folder
5- create a /js/ folder inside assets
6- copy your .js inside this js folder ///here you can import:
for CSS: @import url(“https//:yourcss.css”);
for JS: ImportCall:import(‘https//:yourjavascript.js’)
7- goto /src/index.html
8- Add your path
9- Go to your typescript file of choice and declare var N;
10- N.yourFunction
11- ionic serve

10

This loses all the dead code elimination that webpack does for us. Wrapping this in an npm module would seem to be a superior strategy.