includePaths do not work with Webpack 2

Hi everyone, I am using Windows 10 x64 and Webpack 2, with sass-loader version 4.1.1 , but can’t use standard syntax

use: [
    {loader: 'style-loader'},
    {
        loader: 'css-loader',
        options: {
            sourceMap: true
        }
    },
    {
        loader: 'sass-loader',
        options: {
            includePaths: [
                path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
                path.resolve(__dirname, 'node_modules/motion-ui/src'),
                path.resolve(__dirname, 'resources/assets/sass')
            ],
            sourceMap: true
  
        }
    }
]

The only way to get this to work is to use LoaderOptionsPlugin

new webpack.LoaderOptionsPlugin({
    options: {
        context: '/', // <- putting this line right under "options" did the trick
        sassLoader: {
            includePaths: [
                path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
                path.resolve(__dirname, 'node_modules/motion-ui/src'),
                path.resolve(__dirname, 'resources/assets/sass')
            ]
        }
    }
})

Otherwise it throws an error saying can’t import ‘foundation’ and so on. LoaderOptionsPlugin stops to work as of version 5.0.

[jhnns]

The sass-loader has its own loader pipeline. This configuration fixed the issue:

            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({
                            includePaths: [
                                path.resolve(__dirname, 'node_modules/foundation-sites/scss'),
                            ]
                        }), // <style lang="scss">
                        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
                    }
                }
            }

[jhnns]

This is my config and it’s working with your sass-loader-test repository

const webpack = require('webpack')
const path = require('path')
// noinspection JSUnresolvedFunction
module.exports = {
    entry: [
        'babel-polyfill',
        'webpack/hot/dev-server',
        // ?reload=true enables full page reload on hmr failure
        'webpack-hot-middleware/client?reload=true',
        './app'
    ],
    context: path.resolve(__dirname, 'resources/assets/js'),
    output: {
        path: path.resolve(__dirname, 'public/js'),
        filename: 'app.js',
        publicPath: '/js/'
    },
    devtool: 'eval-source-map',
    module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015'],
                    plugins: ['lodash']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({
                            includePaths: [
                                path.resolve(__dirname, 'node_modules/foundation-sites/scss'),
                            ]
                        }), // <style lang="scss">
                        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            includePaths: [
                                path.resolve(__dirname, 'node_modules/foundation-sites/scss'),
                            ]
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            'inputmask.dependencyLib': path.resolve(__dirname, 'node_modules/jquery.inputmask/extra/dependencyLibs/inputmask.dependencyLib/'),
            'inputmask': path.resolve(__dirname, 'node_modules/jquery.inputmask/dist/inputmask/inputmask/')
        },
        extensions: ['.webpack.js', '.web.js', '.tsx', '.ts', '.js']
    },
    // watchOptions: {
    //     poll: 1000 // <-- it's worth setting a timeout to prevent high CPU load
    // },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // new webpack.LoaderOptionsPlugin({
        //     options: {
        //         context: '/', // <- putting this line right under "options" did the trick
        //         sassLoader: {
        //             includePaths: [
        //                 path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
        //                 path.resolve(__dirname, 'node_modules/motion-ui/src'),
        //                 path.resolve(__dirname, 'resources/assets/sass')
        //             ]
        //         }
        //     }
        // })
    ]
}

sass-loader-test master ✗ 5bbf397 6d △ ➜ webpack -v
2.2.1
sass-loader-test master ✗ 5bbf397 6d △ ➜ webpack 
(node:6034) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: b984fcd717d3b5867277
Version: webpack 2.2.1
Time: 2794ms
 Asset     Size  Chunks                    Chunk Names
app.js  1.62 MB       0  [emitted]  [big]  main
  [87] (webpack)/buildin/global.js 509 bytes {0} [built]
 [120] /Users/jhnns/dev/temp/sass-loader-test/~/vue/dist/vue.runtime.esm.js 174 kB {0} [built]
 [121] ./app.js 305 bytes {0} [built]
 [122] /Users/jhnns/dev/temp/sass-loader-test/~/babel-polyfill/lib/index.js 833 bytes {0} [built]
 [123] (webpack)-hot-middleware/client.js?reload=true 6.68 kB {0} [built]
 [124] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
 [127] /Users/jhnns/dev/temp/sass-loader-test/~/core-js/fn/regexp/escape.js 107 bytes {0} [built]
 [307] /Users/jhnns/dev/temp/sass-loader-test/~/core-js/shim.js 7.38 kB {0} [built]
 [314] /Users/jhnns/dev/temp/sass-loader-test/~/querystring-es3/index.js 127 bytes {0} [built]
 [316] /Users/jhnns/dev/temp/sass-loader-test/~/strip-ansi/index.js 161 bytes {0} [built]
 [318] ../sass/app.scss 1.12 kB {0} [built]
 [319] ./App.vue 1.57 kB {0} [built]
 [325] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} [built]
 [329] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
 [330] multi babel-polyfill webpack/hot/dev-server webpack-hot-middleware/client?reload=true ./app 64 bytes {0} [built]
    + 316 hidden modules
sass-loader-test master ✗ 5bbf397 6d △ ➜