Where to import custom SASS styles now with Ionic 2 RC0

Hi there!

I have an existing project that I’m upgrading to RC0 and I am trying to figure out where to put my site-wide sass file, and how to import my area-based sass files now. For instance, in Beta 11 I had the app.core.scss file and imported my area-based sass files there. ie:

@import “app.redcap”; // Sitewide styles

@import “…/pages/user/login/login”;
@import “…/pages/tabs/tabs”;
@import "…/pages/feed/feed;

Now that RC0 suggests removing the app.core.scss file, where/how should I go about importing my custom styles elsewhere? So far as I can tell the upgrade steps are missing this information :confused:

Thanks for your time!

i imported my scss files at the variables.scss

As far as I can tell it’ll automatically import sass files under pages/

1 Like

Thanks for the feedback guys! If @mhartington or someone from ionic could confirm what the prescribed way to do this is, that would be super helpful :slight_smile:


Doesn’t work for me…

In RC, you have to provide selector name in the .ts file. Make sure you start your scss file with the selector name to include the scss files in build. It is mentioned in https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#steps-to-upgrade-to-rc0 (35th point in Modifying your Existing Project) and it works for me.

I tried it on a new project but it still KO…Still searching.

Thanks for this AishApp! If this is true, the documentation is very lacking in detail :slight_smile: Also, #35 wasn’t added until late yesterday, haha. I usually love the Ionic Team (they’re amazing). But with this release, I think they kinda dropped the ball on the migration documentation.

That said, what about global styles that could be used in any page/component? Where should those go, and where should they be imported?

1 Like

Pull requests are always welcomed…
Be part of the solution.

We’re constantly improving the docs, just things take time.

1 Like

Hi Mike! Thanks for the response! I totally understand the intensity of releasing a major update like this, and I’m more than happy to be part of the solution and create a PR, but the problem is that I don’t even know what to change :slight_smile: As soon as I can get a better understanding of how this is supposed to work, I’ll be happy to submit a change to the docs.

From what I’ve cobbled together, if you’re migrating an existing project to RC0, you should:

  • Remove the existing stylesheets (md, ios, core)
  • Rename app.variables.scss to variables.scss
  • Create a new file alongside variabls.scss called global.scss. In global scss you would put site-wide styles that are not component-specific. <— Sort of feel like this is correct
  • And as a disclaimer, you no longer need to @import component-specific styles as that’s done automatically by virtue of a naming convetion?? <— No idea if this is correct

Can you guys elucidate on this, or correct me if I’m wrong on any of the points above?


The problem is if you want to use the colors variables in the global.scss you are going to get a loop reference error of sass. It’s still all a bit confusing at moment.

1 Like

@garwoodredcap the issue here for me was that I was creating .sass files instead of .scss files.

As you can see on the source code

The rollup.js config is pretty straight foward!

It loads theme/variables.scss before everything else
Then all the scss files inside your root directory.

YOu can place the scss inside you components folder and reference them on scss with their selector name like

sg-login {
  background-color: red

I read the thread and still don’t understand how to do this - so how is this properly done?

The changelog says:

Add selectors to each of your components that are used as pages. These selectors will be used for scoped sass. With this change this is now the proper way to scope your sass for an individual page: In your template:

about-page {
  #title {
    color: blue;

Also in example project (alternative1 in rc0 upgrade documentation), it says:

$ionicons-font-path: "../assets/fonts";

However in very same project there is only a directory assets/icons.

I have used import in Beta11 with 250 Files and about 1000 Component-specific Styles. Changelog documentation and buggy example project just does not cut it for us. Please somebody point me to the right link or describe how to move scss from Beta11 to RC0.

Totally agree. The docs this time are crap. I am facing so many issues. This is aweful.

That doesn’t answer the question. Nothing in this post has resolved this issue for me. I’ll figure it out but it’s only one thing in a long line of issues since the changeover from Beta11 to RC0.

I haven’t been paying as much attention to what is going on in the Ionic community since RC0 was released and I imagine it’s demoralising to have to deal with people who are angry and lashing out about issues that they see but a bit of perspective, from both sides, wouldn’t be amiss.

To give you my perspective -
I spent three months working on a project for a client with Ionic 2, client’s choice of framework. The change to RC0 has put the project back by at least a month. I have nothing to gain by this, financially, as my contract was up at the end of September. I have also moved on to another job so can’t give the client as much time as I’d like, or they need, to get the app back on track.

I have also given presentations and advice to local Meetups and groups about the features and benefits of using Ionic in their projects.

Likewise, I’m going to spend the weekend trying to get this sorted out, have you noticed that the docs say RC0 is the latest version and the conference app uses RC1?

Anyway, on the styling issues I was seeing. By using selector in the component and in the scss file the styles were being included for me. But Ionic RC0/1/* seems to have made a lot of changes that weren’t documented, so I was applying styles to components and page elements like scroll-content and ion-list > .item:last-child these have been changed so my new code references -
.scroll-content and .list-md > .item-block:last-child

I hope this helps and good luck with your rebuild

1 Like

It’s your client’s fault to have chosen to build business and infrastructure upon Beta software. I hope they are able to learn from it. We did the same. Our project is even bigger. I learned from it. Never Beta. Never Ever.


True but I’d like to help them out

Have you seen the recent post on here? - Anyone else giving up on RC0? Rolling back to Beta 11!

The official line seems to be to stick with Beta11

That post suggest before you roll down to beta 11 is to downgrade roll up to gulp or even web pack. Ionic team does not recommend to downgrade to beta11 from what I read. I just don’t want false rumors to be spread.

I’m able to create custom css per file by doing the following only:

  1. Create a .scss file in the /page/your_page directory.
  2. Inside the .scss file should be the selector for your page in the .ts file’s component decorator. eg
    your_page {
    .some-class {
    background-color: red;
  3. That’s it! Now add .some-class into your HTML.

So all of your points were spot on. I confirm it.