Repository navigation
bug: 4.6.0 missing scss files #18639
Description
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
Activity
liamdebeasi commentedon Jun 27, 2019
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 infofrom your project's directory?Thanks!
hiepxanh commentedon Jun 27, 2019
remove node_modules then install again
fmendoza commentedon Jun 27, 2019
Same issue here. I need to reload my browser several times to avoid a white screen.
brandyscarney commentedon Jun 27, 2019
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 infoon the original issue. Please run it in a terminal, you should get something like the following if inside of an Angular app:Thank you!
6 remaining items
MarkChrisLevy commentedon Jun 27, 2019
@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 commentedon Jun 27, 2019
@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
scssfiles. I tried creating a new app using the following commands: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?
If you're still seeing issues after this can you open a new issue please. 🙂
brandyscarney commentedon Jun 27, 2019
@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.1release (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: #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 commentedon Jun 27, 2019
@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 commentedon Jun 27, 2019
@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 commentedon Jun 28, 2019
Linking the issue by @lincolnthree for the white screen: #18649
It seems to be related to having multiple copies of Stencil installed. We are looking into it.
lincolnthree commentedon Jun 28, 2019
@brandyscarney Oops! Thanks, I thought I put a link in there! Too many edits :)
manucorporat commentedon Jun 28, 2019
Where you importing the SCSS exactly from? which path? can yo provide a code example?
MarkChrisLevy commentedon Jun 29, 2019
@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 ;-)
fix(stencil): update copy task to copy all sass files
MarkChrisLevy commentedon Jul 9, 2019
It is fixed in 4.6.1. Thanks @brandyscarney!
ionitron-bot commentedon Aug 9, 2019
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.