Topic: CSS Compile Error
- Bootstrap
- MDBootstrap
- My own SCSS so that I can override anything
Marta Szymanska staff pro premium commented 7 years ago
Look at this tutorial, it may help: https://mdbootstrap.com/bootstrap-gulp-tutorial/.
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 premium priority commented 7 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
ghengeli pro commented 7 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. CheersMichal Szymanski staff pro premium priority commented 7 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.
Michal Szymanski staff pro premium priority commented 7 years ago
I have answered you above and I didn't get any response.ghengeli pro commented 7 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 pro premium priority commented 7 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 7 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 pro premium priority commented 7 years ago
As I wrote you - we'll take a look at this problem. RIght now we're in the middle of huge update.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: Other
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No