Scss file just for a single page

Ionic Framework ionic-v3
1

Hi, I want to use a scss file just for a single page. I have this:

component.html
component.js
component.scss

But this doesn’t load the styles for this component.

If I import component.scss into app.core.scss, this styles are for the hole app, not just for the component.

Thanks

2

You sure you’re not supposed to import component.scss instead? Unless you did a typo there, but I see componen.scss, which is totally different from component.scss

3

Sorry It is just a typo.

If I import component.scss, this styles are for the hole app, not just for the component.
4

I don’t have any clue how one would do this with browserify, but if you use webpack it’s pretty easy.

webpack.config.js

module: {
  loaders: [
    { test: /component\.scss$/, loaders: "raw|sass" }
  ]
}

component.js

@Page({
  styles: [require('./component.scss')]
})
5

try this
your component.scss may have the root style element as

.component{

}

Try changing this to

.component-page{

}
1 Like
6

Thanks for your help! That works!