Laravel-mix: Can't import css from node_modules/

[kyrpas]

• Laravel Mix Version: 0.8.1
• Node Version (node -v): v6.9.5
• NPM Version (npm -v): 4.2.0
• OS: OSX Yosemite 10.10.5

Description:

Can't import css from a node_module

Steps To Reproduce:

laravel new test-project
npm install
npm install jquery.filer --save-dev

Replace everything in the resources/assets/sass/app.scss with:

@import "node_modules/jquery.filer/css/jquery.filer.css";

npm run dev

Comes back with:

This dependency was not found in node_modules:

* -!./../../../node_modules/css-loader/index.js!../assets/fonts/jquery.filer-icons/jquery-filer.css

Did you forget to run npm install --save for it?

This is caused by the imported css file above, which is also importing relatively another css file:

@import url('../assets/fonts/jquery.filer-icons/jquery-filer.css');

Replacing it with the line below does the trick but changing node_module/ files is not recommended.

@import url('../../../node_modules/jquery.filer/assets/fonts/jquery.filer-icons/jquery-filer.css');

Is there a way to get the same result by tweaking webpack's configuration?

As always, can't thank you enough for all your hard work Jeffrey!

[JeffreyWay]

@kyrpas Can you try updating your app.scss file to be:

@import "~jquery.filer/css/jquery.filer.css";

And then re-run npm run dev.

[kyrpas]

@JeffreyWay that did it!! Thank you!!

Oh man... levelling up to webpack-es6-vue-etc from jquery/gulp/simply-concatenating-stuff is going to be a challenge but we'll get there :) Thanks again!

[JeffreyWay]

Yeah, there's a lot to learn. The tilde tells Webpack that we're not looking for that jquery.filer.css file relatively to app.scss. Instead, we want to look within node_modules.

Don't forget that, if you do just want to concatenate scripts, you still can with Mix. Sometimes, that's the easiest option for basic or older projects.

mix.combine([
    'public/js/app.js',
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/scripts.js');

Or, if you still want to use the ES2015 syntax, just change that call the mix.babel(), and it'll compile everything down as well.

[racl101]

@JeffreyWay Hi Mr. Way.

If I may ask, what does the ~ do in @import "~jquery.filer/css/jquery.filer.css"; ?

Love Laracasts btw.

[ruchern-chong]

@racl101 ~ is just an alias to node_modules/

[rpounder]

@JeffreyWay Hi Mr. Way.

If I may ask, what does the ~ do in @import "~jquery.filer/css/jquery.filer.css"; ?

Love Laracasts btw.

~ = tilde, and as Jeffrey said, it's an alias for the node modules folder.