Webpacker: How to add `includePaths` to Sass loader

[jonhue]

I overrode the sass-loader configuration to include the node_modules path:

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

environment.loaders.prepend('sass', {
    test: /\.(css|scss|sass)$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader'
    }, {
        loader: 'sass-loader',
        options: {
            includePaths: ['node_modules'],
        }
    }]
})

module.exports = environment

Webpack compiles without errors, however it does not output an application.css pack anymore.

I made the change, because NPM plugins I imported from my Sass files who imported code from other plugins were causing errors when compiling.

[jonhue]

This ended up working for me:

environment.loaders.get('sass').use.find(item => item.loader === 'sass-loader').options.includePaths = ['node_modules']

[onedayitwillmake]

This variation worked for me in webpacker 5.x:

(One extra level deep options.sassOptions)

environment.loaders.get('sass').use
   .find(item => item.loader === 'sass-loader').options.sassOptions.includePaths.push(...['node_modules'])