How to use this with Rails Webpacker 4.0

[jhirn]

Hello. I'm trying to figure out how to use the with Rails and Webpacker. I was assuming it was a direct replacement for the sass-loader and resolve-url-helper but i can't seem to get it to rewrite/resolve url(..) tags in my scss files.

Here is how I've added it to the loaders.

const fastSassLoader = {
  test: /\.(scss|sass)$/,
  use: [
    'css-loader', 'sass-loader', 'postcss-loader',
    {
      loader: 'fast-sass-loader',
      options: {
        includePaths: [
          path.resolve(__dirname, '../../../app/javascript'),
          path.resolve(__dirname, '../../../vendor/assets/stylesheets'),
          path.resolve(__dirname, '../../../node_modules')
        ]
      }
    }
  ]
}

environment.loaders.prepend('fastSass', fastSassLoader)

Output from the speed measure webpack plugin tells me that it is being used in the chain, although the order is a bit curious

css-loader, and
sass-loader, and
postcss-loader, and
fast-sass-loader, and
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
sass-loader took 4.081 secs
  module count = 7

I've also tried without the includePaths. Additionally, I've completely removed the sass loader form package.json yet same thing. Seeing these types of errors:

Module build failed (from ./node_modules/@rails/webpacker/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/Users/jhirn/src/piq/daisy/app/javascript'```

Would love to get this working so I don't have continue using `resolve-url-loader` it's really slowing down my build time by a lot. 

[yibn2008]

Don't use sass-loader and fast-sass-loader together ...

[CyberAP]

In your environment.js:

const sassLoader = environment.loaders.get('sass');

const idx = sassLoader.use.findIndex(({ loader }) => loader === 'sass-loader');

const p = path.resolve(__dirname, '../../frontend/');

sassLoader.use.splice(idx, 1, {
  loader: 'fast-sass-loader',
  options: {
    includePaths: [p],
    resolveUrls: false,
  }
});

sassLoader.use.splice(-1, 0, {
  loader: 'resolve-url-loader'
});

But I couldn't get imports to work.