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.
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.
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