sass includePaths with laravel-mix/webpackConfig

Updating Laravel to 5.4 but having issues getting the includePaths to work for sass. When I build it throws error: Module build failed: undefined File to import not found or unreadable: bootstrap/variables.

I used to do this with gulp:

mix.sass('app.scss', null, null, {includePaths: ['node_modules/bootstrap-sass/assets/stylesheets']})

With webpack trying like this:

const { mix } = require('laravel-mix');
const webpack = require('webpack');
const path = require('path');

mix
    .sass('resources/assets/sass/frontend/app.scss', 'public/css/frontend.css')

    .js([
        'resources/assets/js/frontend/app.js',
        'resources/assets/js/plugins.js'
    ], 'public/js/frontend.js')

    .webpackConfig({
        //devtool: 'source-map',
        resolve: {
            alias: {
                'TweenLite': 'gsap/TweenLite'
            }
        },
        plugins: [
            new webpack.LoaderOptionsPlugin({
                options: {
                    sassLoader: {
                        includePaths: [ './', './node_modules/bootstrap-sass/assets/stylesheets' ]
                    }
                }
            })
        ]
    })

    .version();

Is there a way of debugging this to see if my includePaths is being read at all?

ejdelmonico

9 years ago

Level 53

I do it similarly like this:

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

1 like

gizmojo

9 years ago

Level 3

@ejdelmonico thanks tried this but sadly not made any difference.

I found this issue and presumed it was related to mine not working. https://github.com/webpack/webpack/issues/3612

ejdelmonico

9 years ago

Level 53

You can't include a config addon after you call mix. You need to do it first by itself for best results...then call mix.sass().js().

mix.webpackConfig({
  new webpack.LoaderOptionsPlugin({
    test: /\.s[ac]ss$/,
    options: {
      includePaths: [
        path.resolve(__dirname, './node_modules/bootstrap-sass/assets/')
      ]
    }
  })
});

1 like

Please or to participate in this conversation.