Mdb-ui-kit: Sass compile error

[benoitrongeard]

Hey guys, i'm using laravel, and i have an error when i want to import SASS of bootstrap-material-design...

I'm using @import "node_modules/bootstrap-material-design/sass/bootstrap-material-design.scss";

and i have this error when i run gulp : File to import not found or unreadable: bootstrap/variables - @import "bootstrap/variables";

Some one can help me ? :)

[MaronMariusz]

Hi,
I have the same problem and I think there is mistake since those files have:
@import "bootstrap/variables";
Which does not exists.
Remember one thing here if you are using imports in your own files then:
bootstrap/variables
leads currently to path where you importing whole package.
What you could do is to make bootstrap folder next to your file that you importing package and inside this folder you can create variables file, paste there bootstrap sass variables and it will work. Another idea is to install bootstrap-sass via npm and instead of copy/paste variables from some source just import bootstrap-sass variables into newly created file in bootstrap/variables.
This is just workaround and of course problem exists in the package and in my opinion should be fixed as soon as possible :)

[knaos]

I am having the same issue.

[FezVrasta]

Sorry guys but without a repository on GitHub where I can reproduce the problem, I can't really help you. Open an issue following the issues' template and don't pretend that who maintains open source stuff works for you.

[MaronMariusz]

We are just wondering what does it mean: https://github.com/FezVrasta/bootstrap-material-design/blob/master/sass/_import-bs-sass.scss and where it points since there is our problem.
Installing it via bower and include just CSS files work well I guess, but working with NPM, it is not the same way and throw error from file above.
Eventually (time goes fast) I will try to make some PR for that in case that you don't have time for some kind of fix on that.
Cheers!

[FezVrasta]

Again, provide a repository on GitHub with the minimal amount of code needed to reproduce the problem and I will look at it.

I must be able to:

git clone <repository>
cd <repository>
npm install
npm start

And get the error.

[rzb]

@FezVrasta there are multiple issues with the same error and it's quite simple, no need to do all that gymnastics to reproduce it.

@import "bootstrap/variables"; points to nowhere.

From the repo history, I see the full path was removed on purpose. But then at the very least the documentation is lacking clear alternatives.

The solution I found for laravel's elixir/mix is to create a load path, like so:

    .sass('resources/assets/sass/app.scss', 'public/css', {
        includePaths: ['node_modules/bootstrap-sass/assets/stylesheets/']
    })

Since elixir and mix sit on top of gulp and npm respectively, I'd assume you can do something similar without laravel.

[FezVrasta]

Isn't this what is already explained in the readme?

[FezVrasta]

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.

[rzb]

It is, but it assumes we all know how to add a load path to the compiler. Given the number of issues, perhaps an example could be very helpful.

[FezVrasta]

A PR to introduce it is welcome.