Sass compile error

[appkr]

During the gulp build, I encountered the following error message.

Error in plugin 'sass'
Message:
    _assets/vendor/bootstrap-material-design/sass/_import-bs-sass.scss
Error: File to import not found or unreadable: bootstrap/variables
       Parent style sheet: /Users/***/workspace/blog/_assets/vendor/bootstrap-material-design/sass/_import-bs-sass.scss
        on line 1 of _assets/vendor/bootstrap-material-design/sass/_import-bs-sass.scss
>> @import "bootstrap/variables";
   ^

When I change the @import statement to the following it works fine.

// bootstrap-material-design/sass/_import-bs-sass.scss
@import "variables";

[appkr]

Sorry~ Still have error... I will re-post after studying more.

[rosskevin]

Add bower or node as you include path, check our gruntfile.

[loranger]

Can you please provide a example or give any clue ?

I tried to use the sass version with laravel elixir but always got this error message, even if I declare an includePath :

gulpfile.js :

elixir(function(mix) {
    mix.sass('app.scss', null, {includePaths: ['../../../node_modules/bootstrap-sass/assets/stylesheets/']});
});

app.scss :

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

output :

Sass Compilation Failed: node_modules/bootstrap-material-design/sass/_import-bs-sass.scss
Error: File to import not found or unreadable: bootstrap/variables
       Parent style sheet: /Users/loranger/Developer/work/phoenixcorp/respawn/dactylifera/node_modules/bootstrap-material-design/sass/_import-bs-sass.scss
        on line 1 of node_modules/bootstrap-material-design/sass/_import-bs-sass.scss
>> @import "bootstrap/variables";
   ^

[rosskevin]

@loranger your includePaths should be base paths, not paths into a project. i.e. path to node_modules

[rosskevin]

With that said, I'm working on an integration with v4 and having nested inclusion errors #874. It may not be identical but seems related.

[w0ng]

To clarify @loranger's problem, the issue occurs when compiling sass when using Laravel Elixir (a gulp wrapper).

Laravel projects are structured:

.
├── gulpfile.js
├── node_modules
│   ├── bootstrap-material-design
│   │   ├── bower_components
│   │   │   ├── bootstrap
│   │   │   │   ├── assets
│   │   │   │   │   └── stylesheets
│   │   │   │   │       └── bootstrap
│   │   │   │   │           ├── _variables.scss
│   │   ├── sass
│   │   │   ├── _import-bs-sass.scss
│   │   │   ├── bootstrap-material-design.scss
├── resources
│   ├── assets
│   │   └── sass
│   │       └── app.scss

A typical workflow is to combine the npm packages with imports in app.scss before compiling with gulp.

An alternative workflow is to do all the imports directly in the gulpfile.js, which works, but becomes a mess and a management pain when installing multiple packages.

Ideally I would like e83b411d75a8b0b8f0d6163d6a8f9781bd80db7b to be reverted, given there's only one external file being imported in sass, but I'm not smart enough to know whether the includepath in gulpfile should be kept, or whether this is a problem specific to Laravel + Elixir.

[appkr]

EDIT. I don't remember what I did to make it work, but it's working now.

Here is the master scss file.

// app.scss
// Not Laravel, but Jekyll project though~ for full code
// @see https://github.com/appkr/blog/blob/master/_assets/styles/main.scss
// @see https://github.com/appkr/blog/blob/master/gulpfile.babel.js

@charset "utf-8";

@import "../vendor/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../vendor/bootstrap-material-design/sass/bootstrap-material-design";
@import "../vendor/bootstrap-material-design/sass/ripples";

// ...

[loranger]

So what I understand from @w0ng is bootstrap-material-design cannot be used anymore with laravel elixir. Ok I'll wait, then. Thanks everyone

[rosskevin]

@loranger My previous guidance on the base path was wrong, I had v4 in mind.

It should work, just because you are using laravel or whatever, it appears to be ultimately using node-sass/libsass.

Be sure that you use a fully qualified pathname to the basepath, I used findup to get this form me in an environment agnostic way.

Try this:

var findup = require('findup-sync')
elixir(function(mix) {
    mix.sass('app.scss', null, {includePaths: [findup('node_modules/bootstrap-sass/assets/stylesheets/')]});
});

[rosskevin]

BTW - we cannot reverse the commit because not everyone uses bower and the old code had a hard path.

[rosskevin]

ONE more thing, if you are using ruby-sass instead of libsass, you need to use:

loadPath: "bower_components/bootstrap-sass/assets/stylesheets" instead of includePaths

In v4, we use libsass exclusively (much faster)

[Poggen]

Exactly how did you get this working, @appkr? The style part of my gulpfile looks like this:

    .pipe(function() {
      return gulpif('*.scss', sass({
        outputStyle: 'nested', // libsass doesn't support expanded yet
        precision: 10,
        includePaths: [
          '.',
          '../../bower_components/bootstrap-sass/assets/stylesheets/'
        ],
        errLogToConsole: !enabled.failStyleTask
      }));
    })

I added another includePaths like suggested earlier in this thread. My main.scss looks like this:

// Needs to be imported first
@import "common/variables";

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import "../../bower_components/bootstrap-material-design/sass/bootstrap-material-design.scss";
@import "../../bower_components/bootstrap-material-design/sass/ripples.scss";
// endbower

// My own styles start here
@import "common/global";
[...]

But it still fails when trying to import bootstrap/variables from _import-bs-sass.scss.

[appkr]

@Poggen God, I don't remember~ I think I made a correction on the original framework files. Not a good way though.. have you tried commenting out all declaration in _import-bs-sass.scss? Or comment out whichever makes the problem. Sorry, I was not much helpful~

[vedmant]

If you use Compass, add additional_import_paths = "node_modules/bootstrap-sass/assets/stylesheets" to config.rb file.

[FaheemAlam]

I am having the same issue. Does any one have a solution for this?

[NathanQ]

2 Fixes:

Hope this will help the next person.

1: Quick fix

1. In the file, bootstrap-material-design/sass/_variables.scss, delete the line @import 'import-bs-sass'; because bootstrap imports it and importing it again seems duplicative.

2: Fix according to the error

1. Reread the error and think about what it says.
2. Open the bootstrap-material-design/sass/_import-bs-sass.scss and read the line that it contains. Oh! It doesn't point at where I have my bootstrap variables file! It needs to go two directories up to get out of the bootstrap-material-design directory then to the location of the bootstrap variables file.
3. Find the file it's trying to import in your project. Hint: Maybe your project isn't set up the same as everyone else.
4. Change the bootstrap-material-design/sass/_import-bs-sass.scss line @import "bootstrap/variables"; to point to the bootstrap variables file.

[FezVrasta]

Or simpler, read the README and add the loadPath as described: https://github.com/FezVrasta/bootstrap-material-design#bower

[NathanQ]

@FezVrasta good point. ;) But, but I didn't use bower... Love this project and thanks for putting it together.

[FezVrasta]

Feel free to send a PR to make it more clear.

[ferencbalogh]

My solution:

Install remove line

npm install --save gulp-remove-line

Add to gulpfile header

var require("gulp-remove-line");

Copy files to destination and remove line from _variables.scss

/* Bootstrap Material */
  gulp.src("vendor/bower/bootstrap-material-design/sass/**")
    .pipe( removeLine( { "_variables.scss": [42]} ) )
    .pipe(gulp.dest("resources/assets/sass/bootstrap-material-design/"));

Enjoy gulp working without problems.

[burakguneli]

unfortunately none of them worked for me but if you are still having this problem, you can try deleting node_modules and run npm install again. It worked for me