CSS Compile Error
I am trying to set the order of SCSS files in my main SCSS file. I’d like to compile in the following order:
- 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):
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.
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 email@example.com and I can look at this and check what is wrong.
Thank you, Marta, I will give gulp a try.
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).
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.
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.
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
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.
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 *-*-*-*
[11:16:46] Starting ‘css-compile’…
[11:16:46] Finished ‘css-compile’ after 6.87 ms
Error in plugin ‘sass’
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
$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.
Any update on this issue?
As I wrote you – we’ll take a look at this problem. RIght now we’re in the middle of huge update.
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.
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)
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?
I have answered you above and I didn’t get any response.
Please login or Register to submit your answer