Style Component ionic v3

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.

selector: ‘page-profile’,
templateUrl: ‘profile.html’,

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

Can you post your profile.scss file?

just simple…

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

    width: 46vw;

      border-top: 1px solid ;
      padding: 8px;
      background-color: #FFFFFF;
      width: 100%;
      border-radius: 50%;

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.


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,

Is it possible that you can share your project?

If you take a look into this repo, you can compare it with your project:

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.

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

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

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