CODEWITHSUNDEEP
ionic2
godzsa
godzsa

Reputation: 2395

Styling Ionic2 templates with local scss

Based on this tutorial I started an ionic2 project from a tutorial template http://ionicframework.com/docs/v2/getting-started/tutorial/adding-pages/.

After successfully adding a new mypage.html and mypage.ts page under /app/pages/mypage I also wanted to align my objects to center on my page, so I created a mypage.scss file with the content: 

.centered {
  text-align: center;
}

Also note that I added the class centered on the mypage.html <ion-content> tag.

What I found that when I serve my page the gulp won't compile and add my own styles to /www/build/css files. Am I missing something or is it buggy?

Upvotes: 1

Views: 98

Answers (2)

godzsa
godzsa

Reputation: 2395

Okay so I found that you have to also import your file to /app/theme/app.core.scss. Which I don't really think is a good solution from ionic team (even worse I did not see this mentioned anywhere).

I think you could edit the gulpfile to source all the scss files under app directory so you don't have to import every single file to app.core.scss

Upvotes: 0

sebaferreras
sebaferreras

Reputation: 44669

You need to include it in your app.core.css file like this:

@import "../pages/mypage/mypage";

The first mypage is the name of the folder, and the second one is the name of the file (the extension is not needed)

Upvotes: 1

Related Questions