0

I'm trying to get material design http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html into Laravel with elixer and gulp.

I've done:

npm install bootstrap-material-design

That succeeded I see the map in node_modules. Then I added this to my app.scss

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

And my gulp file looks like this:

elixir(function(mix) {
    mix.sass('app.scss');
    mix.browserify('app.js');
});

When I try gulp in my terminal it says:

[17:16:31] Finished 'default' after 743 ms
[17:16:31] gulp-notify: [Laravel Elixir] Sass Compilation Failed: resources/assets/sass/app.scss
Error: File to import not found or unreadable: /node_modules/bootstrap-material-design/scss/bootstrap-material-design
       Parent style sheet: stdin
        on line 2 of stdin
>> @import "/node_modules/bootstrap-material-design/scss/bootstrap-material-desig
   ^

{ [Error: resources/assets/sass/app.scss
Error: File to import not found or unreadable: /node_modules/bootstrap-material-design/scss/bootstrap-material-design
       Parent style sheet: stdin
        on line 2 of stdin
>> @import "/node_modules/bootstrap-material-design/scss/bootstrap-material-desig
   ^
]

What am I doing wrong?

T J
  • 42,762
  • 13
  • 83
  • 138
Jamie
  • 10,302
  • 32
  • 103
  • 186
  • Paths starting with a `/` are absolute paths relative to the root. In your case it'd be the root directory of your computer, which (presumably) doesn't have a node_modules directory. Removing the leading slash on the path makes it relative. You'll then need to put the correct relative path depending on your directory structure. For example if you tell us where you put app.scss and your node_modules folder then someone can help with the relative path – Ben Swinburne Apr 07 '16 at 16:05
  • @benswinburne I use Laravel that put's it in recources/sass/app.scss – Jamie Apr 07 '16 at 18:25
  • If I recall correctly gulp runs in the same directory as where your gulpfile.js file is so you should just be able to remove the forward slash (/) from the start of the path and it'll work `@import "node_modules/bootstrap-material-design/scss/bootstrap-material-design";` – Ben Swinburne Apr 07 '16 at 22:30
  • In fact, exactly as Richard has already answered. – Ben Swinburne Apr 07 '16 at 22:30
  • When i remove the / I face the next problem: https://laracasts.com/discuss/channels/elixir/variables-from-custom-theme-are-not-compiled – Jamie Apr 08 '16 at 06:03

1 Answers1

0

Is your node-modules directory one-level up from your app.scss file? If so try removing the leading forward slash in your import: @import "node_modules/bootstrap-material-design/scss/bootstrap-material-design";

Richard
  • 101
  • 4