Mdb-ui-kit: v4: Can't import bootstrap-material-design

[julmot]

I've downloaded the v4-dev branch using npm. Now, when importing the file within my app:

@import "../node_modules/bootstrap-material-design/scss/bootstrap-material-design";

I get the following error:

 error styles/main.scss (Line 45 of node_modules/bootstrap-material-design/scss/_variables.scss: File to import not found or unreadable: bootstrap/scss/variables.

This appears due to line 45:

@import "bootstrap/scss/variables"; // from bootstrap node_module

The path should be ../../bootstrap/scss/variables. Same for all imports in other files, e.g. _core-bootstrap.scss.

Expected result

It should be possible to import the project into another SCSS project

Additional information

The documentation describes:

When using SASS, @import directives cannot be interpolated. Given the variety of configurations, the typical bower_components directory is occasionally in a different location. Given the options, a loadPath was added to the SASS compiler so that bootstrap files could be loaded without specifying the path to the bower_components directory. You may similarly need to add a load path to your compiler. It is still debatable if this is for the greater good, but seems like the only way to accommodate multiple configurations.

I don't see a reason for this. If you've installed it using npm it will be located under ./node_modules/bootstrap-material-design/ and Bootstrap itself under ./node_modules/bootstrap/. Therefore a relative path ../../bootstrap/ from within ./node_modules/bootstrap-material-design/scss/ would work. Same for Bower.

[Mozartted]

Thanks Julmot, I was going to make a request concerning that....

[Mozartted]

@FezVrasta , consider removing the
@import "../../bootstrap/scss/tags"; //on line 52 _core-bootstrap.scss
as it does not map to any scss

[Mozartted]

@FezVrasta ,
am kinda guessing am seeing this errors because I installed via bower

[FezVrasta]

Does it work with npm?

[Mozartted]

Not sure @jumot experienced the same issue on npm, kinda feel it'll be best to make the necessary changes to the branch...

[julmot]

Does it work with npm?

No!

[FezVrasta]

Ok guys you have to be patient, I'm going to spend A LOT of time on this project once BS releases the v4 beta1. Till now I can't promise anything, sorry.

[dionysiosarvanitis]

@Mozartted @FezVrasta tags on L52 _core-bootstrap.scss changed to badge with this commit.

[ansonkao]

I was able to resolve the first part of this error by repeating the solution shown here: https://github.com/FezVrasta/bootstrap-material-design/pull/762/files

The second part of the error is the broken file import to _tags.scss pointed out by @Mozartted. This is specific to the latest version of Bootstrap v4-dev branch where the file was removed. It is still in v4.0.0-alpha.5. We can avoid this second part of the problem temporarily by resolving to v4.0.0-alpha.5. Cheers

[FezVrasta]

Anyone willing to send a PR to fix this?

[FezVrasta]

Everything should compile just fine now.

[JamesVanWaza]

@FezVrasta
I am still getting the error below.

package.json
grunt: 1.0.1,
bootstrap-material-design: 0.5.10,

Why does the version in NPM show as 0.5.10 instead of 4.0.0-beta.4

node-sass: 4.5.3,
npm: 5.5.1
node: 6.11.3

OS: macOS HighSierra

[mathiasleroy]

do we need to "npm install bootstrap" ?

I'm getting this error with gulp-sass

Message:
assets/scss/_variables.scss
Error: File to import not found or unreadable: ~bootstrap/scss/functions.
on line 56 of assets/scss/_variables.scss
from line 2 of assets/scss/_core.scss
from line 3 of assets/scss/bootstrap-material-design.scss

@import "~bootstrap/scss/functions"; // from bootstrap node_module

---

My versions:
"devDependencies": {
"bootstrap": "^4.1.3",
"bootstrap-material-design": "^4.1.1",
"gulp": "^3.9.1",
"gulp-sass": "^4.0.1"
}