Sign in


Sign up


CSS Compile Error

MDB SupportCategory: OtherCSS Compile Error
rlcraven Pro User asked 4 months ago

Hello,

I am trying to set the order of SCSS files in my main SCSS file.  I’d like to compile in the following order:

  1. Bootstrap
  2. MDBootstrap
  3. My own SCSS so that I can override anything

Currently my main SCSS file is as follows (there is none of my own css yet):

@import “../bootstrap/bootstrap-reboot.scss”;
@import “../bootstrap/bootstrap.scss”;
@import “../bootstrap/bootstrap-grid.scss”;
@import “../mdb/mdb.scss”;

When I compile there is an error:

Error: Incompatible units: ‘px’ and ‘rem’. 
on line 669 of C:/repos/StellaTrainer/StellaTrainer/Content/mdb/mdb/free/data/_variables-b4.scss 

The line in question is:

$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;

I’m using Ghostlab to compile.

Currently I don’t have any overrides in custom.scss.

Thank you for any insight.

And, if I am setting up the compilation incorrectly please let me know.

Thanks!

5 Answers
Marta Szymanska answered 4 months ago

Hi,

I’m not sure why it is a problem with compiling in your project. Have you tried to use Gulp to compile sass files? Within MDB team we use Gulp and it’s working great. You can also send me your whole MDB project to m.szymanska@mdbootstrap.com and I can look at this and check what is wrong.

Best,

Marta

rlcraven Pro User answered 4 months ago

Thank you, Marta, I will give gulp a try.

Marta Szymanska replied 4 months ago

Look at this tutorial, it may help: https://mdbootstrap.com/bootstrap-gulp-tutorial/.

ghengeli Pro User answered 4 months ago

Marta – that tutorial does not address the issue. That tutorial simply describes compiling mdb.scss as provided out of the box. rlcraven (as well as myself) is attempting to compile mdb AND bootstrap together into a single css output. As rlcraven described his MAIN, SINGLE .scss file imports multiple things (including mdb and bootstrap).
@import “../bootstrap/bootstrap-reboot.scss”;
@import “../bootstrap/bootstrap.scss”;
@import “../bootstrap/bootstrap-grid.scss”;
@import “../mdb/mdb.scss”;
As I have seen pointed out in other places, the issue is that bootstrap 4.0.0 defines variable sizes with rem and mdb is still using px. These units are incompatible.
It looks like there is an open pull request https://github.com/mdbootstrap/bootstrap-material-design/pull/108 that would address this issue. This pull request has been open since October 2017!!!
I am considering purchasing the pro package but issues such as this are currently preventing this.
 
https://mdbootstrap.com/support/?qs=incompatible+units
s/

https://mdbootstrap.com/support/how-to-install-mdbootstrap-into-native-webpack/
https://mdbootstrap.com/support/error-when-building-scss-with-laravel-5-5-mix/
https://mdbootstrap.com/support/incompatible-unit

Josip Tomašev Pro User replied 3 months ago

Hi, gengeli

Only simple advice from me: you don’t need to compile all 3 bootstrap*.scss, it’s enough to use bootstrap.scss, because other 2 are included in this one.
I suppose a problem which you have is because of that extra 2 files.

Best,
Josip

Michal Szymanski answered 4 months ago

Dear Users,

by using gulp and our tutorial you can compile MDB, Bootstrap and your custom SCSS code into the single CSS file.

Nevertheless, we can provide you a support only with the problems related to compilation of MDB files. We cannot take responsibility for compilation errors of external files.

The second thing – MDB uses in most of the cases rem units, but there are situations when PX units are more desirable. You can see the same approach in Bootstrap itself – for example, they use PX in the following components:

$grid-breakpoints, $container-max-widths, $grid-gutter-width, $border-width, $btn-box-shadow, $btn-active-box-shadow, $input-box-shadow, $custom-select-bg-size

Best Regards,

Michal Szymanski replied 3 months ago

What exactly is your goal?

1. Do you want to concatenate all your styles (bootstrap, MDB and your custom styles) into a single .css file?
2. Do you want to compile Bootstrap sass file because you've changed it?

If 1 – you can just add already compiled bootstrap.css and mdb.css (and eventually your custom.css file) files as .scss files and compile it to single main.css file

If 2 – we do not recommend such an approach because with every bootstrap or MDB updates your changes will be overridden. If you want to change anything – overwrite it with your custom style.

Actually what could be a reason to compile bootstrap sass on your own?

Btw, we'll have a look at this compile error and perhaps we'll give a solution in the next release. I cannot promise right now because we're completely overwhelmed with the work.

ghengeli Pro User replied 3 months ago

Can you explain where in the tutorial you compile the bootstrap sass code?

I walked through this one: https://mdbootstrap.com/bootstrap-gulp-tutorial/
and bootstrap.css and bootstrap.min.css are included in the zip file /dist folder and are no where referenced in the gulpfile, as well as the fact that you never npm install –save bootstrap.

I was expecting maybe to find it in this one: https://mdbootstrap.com/customize-bootstrap-mdbootstrap-project/ – but not so much.

In my case there are no external files being compiled. I am simply trying to import mdb.scss and bootstrap.scss into a main site.scss
*-*-*-* site.scss *-*-*-*
@import “node_modules/bootstrap/scss/bootstrap”;
@import “mdb.scss”;

OUTPUT
================================================================================================
[11:16:46] Starting ‘css-compile’…
[11:16:46] Finished ‘css-compile’ after 6.87 ms
Error in plugin ‘sass’
Message:
scss/mdb/free/data/_variables-b4.scss
Error: Incompatible units: ‘px’ and ‘rem’.
on line 669 of scss/mdb/free/data/_variables-b4.scss
>> $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
————————————–^

As you can see $popover-arrow-outer-width is defined in ‘px’ units

In node_modules/bootstrap/scss/_variables:
$popover-arrow-width: 1rem !default;

And there is the rem unit.

So as far as I can tell, there is a conflict between a unit that bootstrap variable is defined in and the unit the mdb variable is redefined in, unless I am misunderstanding something and you should not be able to import both bootstrap and mdb into a single scss file for compilation.

Cheers

ghengeli Pro User answered 3 months ago

Any update on this issue?

Michal Szymanski replied 3 months ago

As I wrote you – we’ll take a look at this problem. RIght now we’re in the middle of huge update.

ghengeli Pro User replied 3 months ago

Doesn’t seem that hard – there’s a pull request out on your git repo… I understand it’s a simple work around on my end, but I would prefer to not make changes which could potentially conflict with future updates.

Michal Szymanski replied 3 months ago

Unfortunately, it’s not possible – as I wrote you we’ll take a look at this Bootstrap issue in the future, but it’s not our priority because we work on the huge update and we are overwhelmed with the work.

There is one thing more you can try on your own :
1. Go to sassmdbfreedata
2. Update _functions.scss and _variables-b4.scss files to the newest versions of bootstrap ( these are bootstrap files)

ghengeli Pro User replied 3 months ago

Weird, I see a response to your comment above. Do you guys have a slack channel or something that we can work this through in real time?

Michal Szymanski replied 3 months ago

I have answered you above and I didn’t get any response.