Mdb-ui-kit: Sass compilation error

[tahq69]

When install via Bower and import bootstrap-material-design.scss file in my own scss and compile, sass throws error:

Sass Compilation Failed: bower_components\bootstrap-material-design\sass\_import-bs-sass.scss
Error: File to import not found or unreadable: bootstrap/variables

Something is missing from source control ...

[rosskevin]

Check the grunt file, it has an added import path for sass compile. This was the last closed pull request to allow for non-bower configurations.

[tahq69]

I dont see any connection with grunt file in this issue.
If I want use your package for less or sass dependency, I cant do that, becouse you are using dependencies (bower_components) witch I dont have because of your package is dependency for me...

in less: _import-bs-less.less you are using

@import "../bower_components/bootstrap/less/variables.less";

But I dont have that file, in such directory...

Same is with _import-bs-sass.scss file, there is

 @import "bootstrap/variables"

Witch you are not sharing for.

• I am using my gulpfile.js to compile sass

var gulp = require('gulp'),
    web = require('tahq69-gulp-web');

gulp.task('default', function () {
    web.scripts.run();
    web.css.run();

    web.watch();
});

[rosskevin]

I'm confused based on your last comment. Are saying that bower is not installing bootstrap and bootstrap-sass dependencies?

[tahq69]

Yes, it is not instaling your package bower and npm dependencies, as your package is dependency for me.
Ewrithyng is ok when I use files from dist, but I want extend your sass files and add my features, but your repository do not contain my_app/bower_components/bootstrap-material-design/bower_components/bootstrap/less/variables.less file. It means I can`t compile your less file.

[20:30:08] Starting 'less'...
Potentially unhandled rejection [2] '../bower_components/bootstrap/less/variables.less' wasn't found. Tried - myapp\bower_components\bootstrap-material-design\bower_components\bootstrap\less\variables.less,..\bower_components\bootstrap\less\variables.less in file myapp\bower_components\bootstrap-material-design\less\_import-bs-less.less line no. 1

[rosskevin]

Correct, our repo does not include it because we are depending on it from bower. And since sass doesn't allow variables in the import and some people have different bower repo locations, we add a path in the sass compiler which is the bower_components path. As I mentioned, this is added to the sass compiler in the gruntfile.

[rosskevin]

Now that I'm on my laptop, here's the reference to the sass compiler paths: https://github.com/FezVrasta/bootstrap-material-design/pull/762

[tahq69]

I think your change is too complex and not describing solution for developpers.
For most of people, the best is example:

IF you want extend Sass, add includePaths/loadPath property to your compiler:
For Grunt use loadPath:

grunt.initConfig({
  sass: {                    
    compile: { 
      options: {      
        loadPath: 'bower_components/bootstrap-sass/assets/stylesheets',
      },
      files: {   
        ...
      }
    }
  }
});

grunt.loadNpmTasks('grunt-contrib-sass');

grunt.registerTask('default', ['sass']);

For Gulp use includePaths

var gulp = require('gulp'),
    sass = require('gulp-sass');

gulp.task('sass', function() {
    return gulp.src('path/to/my/sass/file.scss')
        .pipe(sass({includePaths: 'bower_components/bootstrap-sass/assets/stylesheets'}).on('error', sass.logError))
        .pipe(gulp.dest('./target/path'));
});

Solution for Gulp helped me to fix this issue!

[rosskevin]

Please add a wiki page and I'll point to it from the readme