Bootstrap: incompatible units 'rem' and 'px ; bootstrap\scss\_variables.scss line 420

[ringodotnl]

OS: Win10, Browser Chrome latest, Bootstrap 4 (installed with npm)

Trying to include the bootstrap styling into an Angular 5+ project by adding it at styles.scss with:
@import "~bootstrap/scss/bootstrap";

When compiling gives the following error:
[1] ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
[1] Module build failed:
[1] undefined
[1] ^
[1] Incompatible units: 'rem' and 'px'.
[1] in D..\node_modules\bootstrap\scss_variables.scss (line 420, column 41)

Also line 423 and line 599 do give the same issue when manual fix it by line.

[wolfy1339]

The issue is not with Bootstrap and is quite clear.
px and rem are incompatible units, you can't use px values in Bootstrap 4 anymore.
Also, this issue has already been posted, please search before opening an issue

[andresgalante]

Hi @ringodotnl if you are trying to customize the grid breakpoints please use px as it's described here:

Make sure to set grid values in px (not rem, em, or %).
http://getbootstrap.com/docs/4.0/layout/grid/

If you want to use px's for font size, you can probably read this issue:
https://github.com/twbs/bootstrap/issues/23982

[ringodotnl]

@wolfy1339 Thank you, I saw that issue but this is a different story I think.
So I only included bootstrap scss in the project, haven't use / modify anything in the project so didn't expect to see an error at this point.

@andresgalante thank you, I haven't used bootstrap at all other then including it in the project.

[wolfy1339]

That's abnormal, but Bootstrap doesn't have this problem though. :shrug:
I'm not sure what it could be other than that

---

From: Ringo [e-mail]
Sent: Thursday, February 15, 2018 8:53:32 AM
To: twbs/bootstrap
Cc: wolfy1339; Mention
Subject: Re: [twbs/bootstrap] incompatible units 'rem' and 'px ; bootstrap\scss_variables.scss line 420 (#25632)

@wolfy1339https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fwolfy1339&data=02%7C01%7C%7C107513e683e64e232bed08d5747b8114%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636542996150112505&sdata=XZTicCUVr640xP7DHCnp6be5m20MyravGDa9SozJ7p8%3D&reserved=0 Thank you, I saw that issue but this is a different story I think.
So I only included bootstrap scss in the project, haven't use / modify anything in the project so didn't expect to see an error at this point.

@andresgalantehttps://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fandresgalante&data=02%7C01%7C%7C107513e683e64e232bed08d5747b8114%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636542996150112505&sdata=cV8SjeA%2FZhpRexEMosFHyEHb16jQXJmK59taSq4%2FI80%3D&reserved=0 thank you, I haven't used bootstrap at all other then including it in the project.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Ftwbs%2Fbootstrap%2Fissues%2F25632%23issuecomment-365933132&data=02%7C01%7C%7C107513e683e64e232bed08d5747b8114%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636542996150112505&sdata=Jjvl2YQBKg5DzKVzJC4NlKQwEz37%2BwcB8%2FKOefYV9yc%3D&reserved=0, or mute the threadhttps://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAEYfFetoCl-3bTCIhilfSeg8sE8tqy-3ks5tVDbZgaJpZM4SGlb_&data=02%7C01%7C%7C107513e683e64e232bed08d5747b8114%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636542996150112505&sdata=fxmCS8HZ%2B0WCq97Mij9%2FwaCWUN%2F1v84nmnqSloHV4B8%3D&reserved=0.

[ringodotnl]

@wolfy1339 when I change the 3 lines listed before in bootstrap to 1 rem then it's solved.
Also when I use like bootstrap/dist/css/bootstrap.min.css instead of the scss there's no problem either.

Cheers,
Ringo.

[ringodotnl]

It turned out that there was loaded some other scss before bootstrap which caused the issue.
Switching the load order (so bootstrap first) solved this.

Thank you @all!

[devsekhar]

Thanks It worked for me! Placing the @import "../node_modules/bootstrap/scss/bootstrap";
on top into the styles.scss file.