There is no avail when I attempt to integrate the less by wepack-merge...

[wqcstrong]

The following content is my configuration:

//  config-overrides/index.js
const { merge } = require('webpack-merge')
const extraConfig = require('./webpack.config')

module.exports = {
  webpack (config) {
    config = merge(config, extraConfig)
    return config
  }
}

//  config-overrides/webpack.config.js
const inProd = process.env.NODE_ENV === 'production'
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              sourcemap: inProd
            }
          }
        ]
      }
    ]
  }
}

and then test it in our code:

//  src/inde.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './test.less';

ReactDOM.render(
  <React.StrictMode>
    <h3>123</h3>
  </React.StrictMode>,
  document.getElementById('root')
);

//   src/test.less
@primary-color: #ff9900;
h3 {
  color: @primary-color;
}

there was no avail and no error...

[wqcstrong]

the dependecies and versions:

"react-scripts": "4.0.3",
"less": "^4.1.1",
"less-loader": "5.0.0",

Need your help~

Thx!

[wqcstrong]

I just finished reading the addLessLoader source code of customize-cra. I considered as like the author and did it, but what'is the difference?....🤦‍♂️

[dawnmist]

I'm sorry - I don't know what you mean by "avail".

I can see two reasons why your changes couldn't work - the first reason is what was wrong with your example, the second reason is what would still have been wrong if you fixed the first issue.

1. Create react app defines the rules for loaders inside a oneOf rule. Your array of loaders would end up with your less loader not being put into the oneOf loader array that react-scripts uses. Take a look at the react-scripts code at https://github.com/facebook/create-react-app/blob/fddce8a9e21bf68f37054586deb0c8636a45f50b/packages/react-scripts/config/webpack.config.js#L374 - the less loader must go inside the second rule that react-scripts defines that contains a oneOf field that is an array of loaders. Customize-cra searches for the oneOf rule to put the less-loader into at: https://github.com/arackaf/customize-cra/blob/7e97127e530cc6827af66061525e29925e347670/src/customizers/webpack.js#L200-L201

2. If you fixed issue 1 above, webpack-merge would have added your less-loader to the end of the react-script's oneOf array. React-scripts has a special file-loader at the end of the oneOf array to match all files that have not already been matched by an earlier loader in the oneOf array - see https://github.com/facebook/create-react-app/blob/fddce8a9e21bf68f37054586deb0c8636a45f50b/packages/react-scripts/config/webpack.config.js#L588-L605 . Loaders defined inside a oneOf array will only use the first matching loader found. For your less-loader to be used for .less files, it must be inserted before the react-scripts file-loader in the oneOf array. Customize-cra is inserting the less-loader before the file-loader in the oneOf array when it splices the less-loader into the array at https://github.com/arackaf/customize-cra/blob/7e97127e530cc6827af66061525e29925e347670/src/customizers/webpack.js#L204-L237

Customize-cra is also careful to ensure that it uses the same definition for the processing after less has been compiled to css - for example, using the MiniCssExtractPlugin that react-scripts uses for extracting the styles. Your example may have some issues due to not using the same processing for the css created by compiling less to css with less-loader.

[wqcstrong]

Thx, you're right~ 😘 And the 'avail' means what doesn't work...