Media Queries differ between node sass and dart sass
See original GitHub issuePrerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
Our webpage is upgrading from node-sass
to dart-sass
, but we noticed that the @media-queries used differ between node-sass
and dart-sass
and we have no idea why. We are using webpack to bundle the scss files and using the mini-css-extract-plugin
plugin to extract the css file.
We only use bootstrap for spacing, and it breaks all spacing on our page, the small sample on our screenshot doesn’t look like much but its just an example
Here is the behavior with node-sass
Here is the behavior on dart-sass, notice how it uses px-sm-3 instead ( this is a full size monitor)
Reduced test cases
I was unable to reduce it a lot with the way our production service was, I apologize for this but we did refactor a lot of our sass files and reorganize it in many ways and no matter what we removed, refactored, re-organized etc, the result was the same
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Firefox
What version of Bootstrap are you using?
v5.0.2
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (3 by maintainers)
I am really trying to figure this out, we had multiple people look at it, but we have had the same configuraiton and all we have done is swap out the compiler (node sass vs dart sass and this is the result)
let me look into Sassmeister!
You reminded me about the maps, and it brought to my attention the error on our part. Something was not being bundled correctly between the sets and the maps was being ignored, thanks for bring me to the right direction, closing the issue!