7

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.

heroxav
  • 1,387
  • 1
  • 22
  • 65

1 Answers1

8

Found the solution:

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

Reference: https://github.com/rails/webpacker/blob/3-x-stable/docs/webpack.md

Josh Unger
  • 6,717
  • 6
  • 33
  • 55
heroxav
  • 1,387
  • 1
  • 22
  • 65
  • 1
    Where did you figure out how to add a loader? I'm trying to add the css-loader and the style-loader, but I have no idea how to get them to work. What does your actual css import look like? – Csteele5 May 15 '18 at 18:37
  • @Csteele5 This Github issue mentions it: https://github.com/rails/webpacker/issues/782 and this section here in the Webpacker docs, although not specific to sass-loader explains how: https://github.com/rails/webpacker/blob/master/docs/webpack.md#overriding-loader-options-in-webpack-3-for-css-modules-etc – elliottregan Aug 06 '19 at 19:06