Webpacker: Using less-loader with Webpacker

[brendon]

I was wondering if there was an example of using less-loader with Webpacker. Currently I have the following as a loader:

module.exports = {
  test: /\.less$/,
  use: [{
    loader: 'style-loader'
  }, {
    loader: 'css-loader'
  }, {
    loader: 'less-loader'
  }]
}

It works, but I noticed that the sass-loader is set up differently in Webpacker so I tried to copy it for less-loader:

const getStyleRule = require('@rails/webpacker/package/utils/get_style_rule')

module.exports = getStyleRule(/\.less$/i, true, [
  {
    loader: 'less-loader',
    options: { sourceMap: true }
  }
])

Unfortunately this just results in:

ERROR in ./app/semantic_ui/semantic.less 14:0
Module parse failed: Unexpected token (14:0)
You may need an appropriate loader to handle this file type.
|
| /* Global */
> & { @import "~semantic-ui-less/definitions/globals/reset"; }
| & { @import "~semantic-ui-less/definitions/globals/site"; }
|

It seems that perhaps less isn't being run over the file first? It could be something else, but I thought, while I investigate further, I'd check here to see if anyone had some pointers :)

[gauravtiwari]

@brendon Your original loader is fine. sass-loader is using postcss loader and I guess that's why you are getting that error.

[brendon]

Thanks @gauravtiwari, I went through get_style_rule.js and slowly replicated it in my less loader hoping to find the error crop up. In the end it didn't and this config now works well:

const getStyleRule = require('@rails/webpacker/package/utils/get_style_rule')

module.exports = getStyleRule(/\.less$/i, false, [
  {
    loader: 'less-loader',
    options: { sourceMap: true }
  }
])

The only difference is setting modules to false though I did try this before posting this issue. I must have made another mistake since it's all working now :) Hopefully this helps others.