How to add less-loader to react-app-rewired config?

Question

I am using react-app-rewired and I want to add the less-loader to the config-overides.js but it doesn't work,

I tried with

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
};

and

module.exports = function override(config, env) {
  config.module.rules[1].oneOf.push({
    test: /\.less$/,
    use: [
      {
        loader: "style-loader",
      },
      {
        loader: "css-loader", // translates CSS into CommonJS
      },
      {
        loader: "less-loader", // compiles Less to CSS
      },
    ],
  })

but nothing works, any help please ?

Am using:

• react-app-rewired: "^2.2.1"
• less: "^4.1.2"
• less-loader: "^10.2.0"
• react-scripts: "^5.0.0"

Answer 1

it worked with:

module.exports = function override(config, env) {
config.module.rules[1].oneOf.splice(2, 0, {
  test: /\.less$/i,
  exclude: /\.module\.(less)$/,
  use: [
    { loader: "style-loader" },
    { loader: "css-loader" },
    {
      loader: "less-loader",
      options: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  ],
})

return config
}