How to configure includePaths for SASS on Mix?

I would also very much appreciate any hint here.

I was able to workaround my own problem with font-awesome by using the following code. But I tried hard and wasn't able to set the include paths like @Parziphal suggested.

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

(tilde tells it to search in node_modules)

Was you able to figure it out? Only just seen this question but I was looking for the same yesterday: https://laracasts.com/discuss/channels/elixir/sass-includepaths-with-laravel-mixwebpackconfig

I haven't found a solution. I see in your question that you've tried the loaderOptionsPlugin, did it work?

I think you should be able to do:

mix.sass('resources/assets/sass/app.scss', 'public/css', {
    includePaths: ["absolute/path/a", "absolute/path/b"]
});

Or, you can do as I do it with:

new webpack.LoaderOptionsPlugin({
            test: /\.s[ac]ss$/,
            options: {
                includePaths: [
                    path.resolve(__dirname, './node_modules/foundation-sites/scss/')
                ]
            }
        })

At the end nothing worked. So I hardcoded things and created a soft link to node_modules where my vendor.scss file is, and prefixed the @imports with "node_modules/", but then I had trouble because the loader takes the font files and moves them to the public folder and changes the url to them in the output css file, and I think this whole thing is too stupid to even waste more time trying to find documentation/solutions for that.

I've searched for solutions for days, and everything I try simply doesn't work. So I'll just use Laravel Elixir just for sass, because it simply works.

It's ridiculous how developers can create such extremely complex tools, that they seem not to understand them themselves because they can't explain how to make them work, and nobody cares enough to explain.

In case this helps someone else out, I finally figured out my problem. (16 solid hours of research! This is not for amateurs or ingrates, that's for sure.) Jeffery Way's comment helped me to do imports in .scss files, but not in .vue files.

Here it is:

use: 'css-loader!sass-loader?{"includePaths":["/path/to/node_modules"]}',

Reference: https://github.com/webpack-contrib/sass-loader/issues/412

The only way I can get imports to work is to specify an absolute path in my sass file. Like others, I can't get sass includePaths to work in mix, which is my preferred method (and worked fine in Elixir). If I try it the way Jeffrey Way's post suggests (and which seems logical), I just get import errors. Can someone please provide a simple example of including a path to node_modules that works? And if you're going to post a line of code regarding a loader, please specify which file you're putting this in. I'd like to spend less time compiling and more time building my site.

What i do is:

mix.sass('resources/assets/sass/app.sass', 'public/css', {
    includePaths: ['node_modules']
});
mix.copy('node_modules/font-awesome/fonts', 'public/fonts');

With that i add the whole node_modules folder to the include path, that i don't have to add always manually all paths. And in the app.scss

@import "node_modules/font-awesome/scss/font-awesome"

That's it.

What benefit do you derive from adding the node_modules folder to the include path in webpack.mix.js if you are using the full path for imports in your app.scss?

I don't have anything in my include paths (because it doesn't seem to work), and use paths like:

@import "~foundation-sites/scss/foundation";

in app.scss to get the very same thing.

the July 13th 2017 syntax for @Eltrain 's answer regarding the vue sass loader is something like

use: {
    loader: 'css-loader!sass-loader',
    options: {
        includePaths: ['resources/assets/sass', 'node_modules/foundation-sites/scss']
    }
}

which would go in the webpack.config.js file that you copy from the directory referenced in package.json into your project root directory (don't forget to rename the path to the config file in package.json).

I found this syntax here after realizing vue-loader uses sass-loader

https://github.com/webpack-contrib/sass-loader

If you just want to include a scss file in to you app.css then this is what I was able to do and it worked for me

@import "blog";

and the blog.sass file was added to the app.css out put file