CSS Compile Error

Topic: CSS Compile Error

rlcraven pro asked 7 years 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:

Bootstrap
MDBootstrap
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!

Add comment

ghengeli pro answered 6 years ago

0 0 Best answer

Any update on this issue?

Michal Szymanski staff commented 6 years ago

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

ghengeli pro commented 6 years 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 staff commented 6 years 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 commented 6 years 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 staff commented 6 years ago

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

Add comment

Michal Szymanski staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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,

ghengeli pro commented 6 years 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

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

Please insert min. 15 characters.

Michal Szymanski staff commented 6 years 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.

Please insert min. 15 characters.

Add comment

ghengeli pro answered 6 years ago

0 0 Best answer

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. 
  
<a href="https://mdbootstrap.com/support/incompatible-units/">https://mdbootstrap.com/support/?qs=incompatible+units</a> 
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

Please insert min. 20 characters.

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 priority commented 6 years 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

Add comment

rlcraven pro answered 7 years ago

0 0 Best answer

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

Marta Wierzbicka staff commented 7 years ago

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

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: Other
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

rlcraven

Pro User 10Support score
1Questions 1Answers 0Snippets