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:
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
Thanks for this AishApp! If this is true, the documentation is very lacking in detail 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?
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 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.
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.
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
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.
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:
Create a .scss file in the /page/your_page directory.
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;
}
}
