Ionic-framework: bug: 4.6.0 missing scss files

[MarkChrisLevy]

Bug Report

Ionic version:


[x] 4.6.0

Current behavior:
In this build, all scss files (from themes dir, component dir or any other var file) are missing.

Expected behavior:
They should be present in @ionic/core/dist.

Steps to reproduce:
Just install latest version, @ionic/core is missing those files.

Ionic info:

4.6.0

[liamdebeasi]

Hi there,

Thanks for the issue! Can you provide a repository with the code required to reproduce this issue? Also, can you provide the output of running ionic info from your project's directory?

Thanks!

[hiepxanh]

remove node_modules then install again

[fmendoza]

Same issue here. I need to reload my browser several times to avoid a white screen.

[brandyscarney]

Please provide more details for us to look into this. What framework are you using? How are you building the app? Where are you seeing the errors?

There are some details missing from ionic info on the original issue. Please run it in a terminal, you should get something like the following if inside of an Angular app:

Ionic:
   Ionic CLI                     : 5.1.1
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Thank you!

[MarkChrisLevy]

@brandyscarney @liamdebeasi Just npm install @ionic/[email protected] - you will see, that in dependent package @ionic/core, there are no scss files - AT ALL. No themes directory in dist/collection and in every single component (dist/collection/components/*) there are only css files, no scss files.

Have a look what is downloaded from npm - extract and you will not find any scss file:
https://registry.npmjs.org/@ionic/core/-/core-4.6.0.tgz

Missing scss files breaks build of the apps, that were including e.g. vars scss files (like themes or component vars).

It seems that during the build process of ionic/core package, scss files were excluded.

Build of @ionic/[email protected] was fine, all scss were present.

[brandyscarney]

Thanks @MarkChrisLevy! I was mistakenly reading this as css. The scss files were never meant to be or documented as a part of our public API. We've never recommended importing Sass variables or mixins from Ionic as of Ionic 4 because we may change them at any time and since they are not documented it would be a breaking change in your application and up to you to look for the change in latest. We recommend including any mixins or variables you use in your application directly. We can add this back for now, but it will be something that is removed for the next major version. Please work on migrating to use CSS variables for theming and including any mixins that you need in your app. If we're misunderstanding the use case for always including scss files please let us know. Thank you!

[lincolnthree]

I can confirm, same issue here. White screen on upgrade to 4.6.0. The DOM is there, the application is running without errors, but nothing shows up. I don't believe I've included any non-standard scss files directly.

I used the ionic to generate command to start a new app, and these were included by that:

@import '~@ionic/angular/css/core.css';
@import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css';

@import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';

@brandyscarney I'm confused. Is the above set of includes what you're saying is problematic? Can you elaborate on the changes that will be required to migrate from CSS to CSS variables for theming, specifically? How are we supposed to include the ionic styles if we don't include the CSS files? E.g. how do we move forward and get things working again?

[lincolnthree]

Ah, I think I misread CSS/SCSS as well, still though, I'm confused as to what's wrong?

[MarkChrisLevy]

@brandyscarney In my case I use scss in building custom components, that are more or less based on ionic components (e.g. my own select component or date picker). I'm not saying it is a must to use scss files, but I wasn't aware that is not part of public API (scss files were public in previous versions, so maybe that is why I'm using it).

[brandyscarney]

@lincolnthree There should not be any issues with including the css files that way. That is our recommended project setup. You may be running into a different issue if you're not directly importing any scss files. I tried creating a new app using the following commands:

$ ionic -v
5.1.1

$ ionic start myApp

> tabs

$ cd myApp
$ ionic serve

I am not seeing any issues with the CSS in Chrome or Safari. Could you try removing node_modules completely and doing a fresh install? Or are you seeing it in a different browser/device?

rm -rf ./node_modules
npm i

If you're still seeing issues after this can you open a new issue please. 🙂

[brandyscarney]

@MarkChrisLevy We likely didn't do a great job explaining the move away from Sass as a public API with all of the changes in Ionic 4. When we moved to Ionic 4 with web components it allowed us to remove the requirement of rebuilding all of Ionic's Sass every time a change was made by a developer in their app. This meant that the Sass variables were no longer available by default in an app but it also improved build times. We chose to use CSS variables to replace the Sass variables for theming because they allow runtime changes and can work with Shadow DOM. There are many places where we're actually not even using the defined Sass variables anymore in Ionic which could cause issues if you're importing them and wanting them to match our design. Since Sass became an internal tool of Ionic we decided it wouldn't be a public facing API because our internals around design change rapidly and with the move to follow SemVer it would be hard to not introduce breaking changes related to Sass changes.

We'll add the Sass files back for a hotfix 4.6.1 release (planning on tomorrow if all goes well) but it is planned to be removed for Ionic 5. Do you foresee any issues with relying on the CSS variables? We've had this issue open for awhile that I think would be helpful for reusing some of Ionic's variables: https://github.com/ionic-team/ionic/issues/15229. We're open to feedback if you think there is a definite need for keeping the files at the risk of breaking changes.

[lincolnthree]

@brandyscarney White page seems to be due to the root <html> element never receiving the "hydrated" class. No errors. I will open a new issue when I find the cause (if it's a bug.) Not sure what changed on 4.6.0 but when I add the class everything works fine. Digging.

[MarkChrisLevy]

@brandyscarney I really appreciate that you will restore scss files - it will give me the time to switch to css variables or not to use ionic variables at all. I always support your (ionic's) decisions to move forward, even if it means a bit of additional work. Once again - thanks!

[brandyscarney]

Linking the issue by @lincolnthree for the white screen: https://github.com/ionic-team/ionic/issues/18649

It seems to be related to having multiple copies of Stencil installed. We are looking into it.

[lincolnthree]

@brandyscarney Oops! Thanks, I thought I put a link in there! Too many edits :)

[manucorporat]

Where you importing the SCSS exactly from? which path? can yo provide a code example?

[MarkChrisLevy]

@manucorporat As I wrote, I build my own components and I'm using *.vars.scss, e.g. components/select/select.vars.scss. But again - if that is a problem for you to bring scss files back to dist, then I will make appropriate changes in my components and will stop using scss files. I created this bug report cause there was no info about removing scss files from the builds and thought that it was a mistake. So if you don't feel comfortable with restoring them back then it is not worth to lose time on thinking about it ;-)

[MarkChrisLevy]

It is fixed in 4.6.1. Thanks @brandyscarney!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.