Style Component ionic v3

Ionic Framework ionic-v3
1

i just start ionic-hello-world ionic with sidemenu --v2, when i tried to change some style but nothing happen.
ionic try to find profile.scss on the root level , i think it should www/src/app/pages/profile …

i cant find the way to customize, to make sure ionic just find the scss on component level, not root page.

@Component({
selector: ‘page-profile’,
templateUrl: ‘profile.html’,
styleUrls:[’./profile.scss’]
})

Ionic Framework: 3.0.1
Ionic App Scripts: 1.3.0
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 7.5.0
OS Platform: Windows 10
Navigator Platform: Win32

1 Like
2

Can you post your profile.scss file?

3

just simple…

page-profile {
    
div.profile-container
  {
    margin: 0px auto;
    margin-top: 6vh;
    text-align: center;
  }

  .user-image-container
  {
    width: 46vw;

    .user-image
    {
      border-top: 1px solid ;
      padding: 8px;
      background-color: #FFFFFF;
      width: 100%;
      border-radius: 50%;
    }
  }
}
4

So you didn’t changed the path of the generated sass file? If not can you try a simple

h1 { color: red }

Because I can’t see any problem in your sass file.

5

image

i didn`t change any path yet,
i think this is bug when generated , i use my old downloaded ionic file it can find the scss
without any error,

6

Is it possible that you can share your project?

If you take a look into this repo, you can compare it with your project: https://github.com/MTechDE/ionic-modal-bug

7

I think that you just have to import your .scss into the app.scss:

@import "../pages/profile/profile";

if you have a profile.scss in a pages/profile/ folder.
The Angular way to include the styles via the styleUrls metadata didn’t work for me either.

8

Why did you add the styleUrls array? This isn’t necessary anymore. Just point your scss class to your selectors name, ie.

page-profile {
 // your styles here for the profile page
}
9

yes, i know it’s possible to import inside app.scss. i just want ask to make sure whether it’s bug or by design ionic v3 will not put scss in component level but in global ( root level).
in ionic v2 i usually change scss in component / page level

@luukschoen
oh, i didn`t realize not necessary to add styleUrls anymore. thank you