Laravel-mix: How to add node_modules to the include path?

[lbjones]

• Laravel Mix Version: 0.8.8
• Node Version (node -v): 6.10.0
• NPM Version (npm -v): 3.10.10
• OS: Mac OS

Description:

I am trying to use an NPM package called material-components-web. When I include the main .scss file, it includes other dependencies within itself. Here is the problem though: it doesn't use a path relative to itself, the path is relative to node_modules. According to the official documentation:

NOTE: The components' Sass files expect that the node_modules directory containing the @material scope folder is present on the Sass include path.

I've tried everything I can think of trying to merge using mix's webpackConfig. Webpack's documentation is a little confusing, to say the least.

Has anyone figured this out?

Thanks for your time!

Steps To Reproduce:

On command line,
npm install material-components-web

In my app.scss file,
@import "node_modules/material-components-web/material-components-web";

Then when I try to compile,
npm run dev

I get this:
Module build failed: ModuleBuildError: Module build failed: @import "@material/animation/mdc-animation"; ^ File to import not found or unreadable: @material/animation/mdc-animation.

[JeffreyWay]

Give this a try in your webpack.mix.js file.

mix.sass('resources/assets/sass/app.scss', 'css', {
    includePaths: ['node_modules']
});

[lbjones]

Thank you!!! I'm not sure why I couldn't find that!

The imports now work in the .scss file, but I'm still getting errors when trying to import from a .vue file, such as:

<style lang="scss">
@import '~@material/checkbox/mdc-checkbox';
</style>

Module build failed:
@import "@material/animation/functions";
^
      File to import not found or unreadable: @material/animation/functions.

[Jhersyvb]

For laravel-mix 5 try in your webpack.mix.js

  .sass('resources/sass/app.scss', 'public/css/sass.css', {
    sassOptions: {
      includePaths: ['node_modules'],
    },
  })

[webpixels]

For laravel-mix 5 try in your webpack.mix.js

  .sass('resources/sass/app.scss', 'public/css/sass.css', {
    sassOptions: {
      includePaths: ['node_modules'],
    },
  })

It works in v6 as well \m/

[djmtype]

This works but the node module's css gets imported before all my other styles even though I have it importing into a sass file towards the end.

[thecrypticace]

Unfortunately this is a sass problem with mixed sass & css imports: https://github.com/JeffreyWay/laravel-mix/issues/2793