Search code examples
laravellaravel-5webpackbourbonlaravel-mix

Can not run npm using Laravel-mix

I am having some issue, its killing me. please help. I am trying to run npm in DEV using command: npm run dev

In my webconfig.mix.js : mix.sass('resources/assets/sass/style.scss', 'public/css');

This is errors that i got

 95% emitting

 ERROR  Failed to compile with 4 errors                                                                                                                                                                                               05:33:52

This dependency was not found:

* -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false,"importLoaders":1}!../../../node_modules/postcss-loader/lib/index.js??postcss!bootstrap/dist/bootstrap.css in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/home/vagrant/Code/pudatalk/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/style.scss

To install it, you can run: npm install --save -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false,"importLoaders":1}!../../../node_modules/postcss-loader/lib/index.js??postcss!bootstrap/dist/bootstrap.css

Please see the error above.

So, i found out that its happening when i import :

@import "~bourbon/app/assets/stylesheets/_bourbon.scss";

and i implemented something like : 

.error-bg-img {
    background:url("../img/errorbg.jpg");
    background-size:cover;
}

I am trying to tell you what i had in the code that occur the problem.

I have been trying google it, reinstall so many things, move things around but hopeless. I am a newbie in sass, webpack, and laravel-mix.

Thanks so much

Solution

  • Alright guys,

    I fixed the problem, i didn't now that webpack will automaticly copy the image in /img folder to /public. So i moved my /img from public/ folder to /resources/assests/. And everything is fine now.

    Its all about the path. Sorry i am pretty new with webpack and didn't know about that.