#23603
#23596

less-loader@5

addLessLoader({
  javascriptEnabled: true,
  modifyVars: { '@primary-color': '#1DA57A' },
}),

less-loader@6

addLessLoader({
  lessOptions: {
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  },
}),

@afc163 手动触发一下部署？

Please pin this issue to avoid duplication.

I believe have the same issue:

Error:
_ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'source'. These properties are valid:
  object { lessOptions?, prependData?, appendData?, sourceMap? }_

I followed the steps here: https://ant.design/docs/react/use-with-create-react-app

Well I don't think customize-cra is working now, the only workaround before customize-cra fix their issue is use less-loader@5.x.

$ yarn remove less-loader

// less-loader v6.0.0 is not working
$ yarn add less-loader@5.0.0

I've created a demo repo to reproduce this issue:
https://github.com/liyaodong/antd_less_v6_bug/

related customize-cra issue:
arackaf/customize-cra#241

possible root-cause:
https://github.com/arackaf/customize-cra/blob/404854bcbe7436f5834e4c4863001610951d5c3c/src/customizers/webpack.js#L167-L169

Well I don't think customize-cra is working now, the only workaround before customize-cra fix their issue is use less-loader@5.x.

$ yarn remove less-loader

// less-loader v6.0.0 is not working
$ yarn add less-loader@5.0.1

the right version of less-loader@5 to use would be 5.0.0. I got an error while trying to install @5.0.1

// less-loader @5.0.0
$ yarn add less-loader@5.0.0

Thanks @preshonyee I've updated my comments and repo point to 5.0.0

Workaround for less-load@6:

1. upgrade to customize-cra@next which is 1.0.0-alpha.0 currently.
2. Follow the example in the doc here:

 addLessLoader({
   lessOptions: { // If you are using less-loader@5 please spread the lessOptions to options directly
     javascriptEnabled: true,
     modifyVars: { '@primary-color': '#1DA57A' },
   },
 }),

Ref: arackaf/customize-cra#201

If you are using a custom react boilerplate with webpack you can do the following

     {
        loader: 'less-loader',
        options: {
          lessOptions: {
            javascriptEnabled: true
          },
          sourceMap: true
        }
      }

For the one who is using 'create-react-app' to customize the theme can check the following settings:

craco.config.js

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
            modifyVars: { "@primary-color": "#018a9e" },
          },
        },
      },
    },
  ],
};

package.json

{
  "dependencies": {
    "@craco/craco": "^5.6.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.2.5",
    "craco-less": "^1.17.0",
    "eslint-plugin-prettier": "^3.1.3",
    "lodash": "^4.17.15",
    "prettier": "^2.0.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5"
  },
}

package.json:
"less-loader": "^6.1.0"

config-overrides.js
addLessLoader({ lessOptions: { javascriptEnabled: true, modifyVars: { '@primary-color': 'red' }, }, })

config-overrides.js

fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: { '@primary-color': '#1DA57A' },
            // localIdentName:'[local]--[hash:base64:5]'
        },
    }),

package.json

"@craco/craco": "^5.2.4",
    "@types/jest": "24.0.17",
    "@types/jquery": "^3.3.31",
    "@types/node": "12.7.0",
    "@types/react": "16.8.24",
    "@types/react-dom": "16.8.5",
    "@types/react-router-dom": "^4.3.4",
    "antd": "^3.21.2",
    "axios": "^0.19.0",
    "babel-plugin-import": "^1.12.0",
    "compression-webpack-plugin": "^3.0.0",
    "craco-antd": "^1.11.0",
    "customize-cra": "^1.0.0",
    "echarts": "^4.2.1",
    "jquery": "^3.4.1",
    "less": "~3.12.2",
    "less-loader": "^6.1.0",
    "mobx": "^5.13.0",
    "mobx-react": "^6.1.3",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-app-rewired": "^2.1.3",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "typescript": "3.5.3",
    "webpack-bundle-analyzer": "^3.4.1"

customize the theme. but it did not work for me. what`s wrong with me.how to solving the fucking issue

@jhsu @vio @pmq20 @troynt @kant

For anyone still having this issue, the problem comes from the fact that the package "customize-cra" introduced breaking changes with the function addLessLoader.
Fortunately, someone fixed it by creating this package : "customize-cra-less-loader".
First install the dependency :
yarn add customize-cra-less-loader
Then change your config-overrides.js to :

const { override, fixBabelImports } = require('customize-cra');
const addLessLoader = require("customize-cra-less-loader");

module.exports = override(
// Load antd
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
// Add javascriptEnabled and antd theme configuration
// to the Less loader
addLessLoader({
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
}
}
}),
);