React introduction of ANTD on-demand loading error

background: React is created using Create-react-app Scaffolding, and then yarn Run eject modifies the less configuration after exposing the configuration,

Requirements: implement ANTD components to load and modify topics on demand.

Initially, the configuration for less is followed by the configuration in the Webpack.config.dev.js file.

You can see the scaffolding created by the config file for the load loader write a public method, not the previous Webpack configuration, so follow his way to configure the less file.

Directly copy the configuration of the CSS, modify the configuration to less, and then yarn start restarts the project.

The less file can be loaded at this time.

The following is a antd on-demand load with theme settings.

Download the Babel-plugin-import plugin and add the configuration in plugins

 
 
[
    ‘import‘, {
        "libraryName": ‘antd‘,
         "style": true
     }
],

Found an error

Failed to compile.

./node_modules/antd/lib/style/index.less (./node_modules/css-loader?? ref--6-oneof-5-1!. /node_modules/postcss-loader/src?? Postcss!. /node_modules/less-loader/dist/cjs.js!. /node_modules/antd/lib/style/index.less)

Https://github.com/ant-design/ant-motion/issues/44
. Beziereasingmixin ();
^
Inline JavaScript is not enabled. Is it set in your options?

View issue after adding a bit of code in Lessloader, still error

 
options: {
    javascriptEnabled: true,
    modifyVars: { ‘primary-color‘: ‘red‘,
    },
},

where "Primary-color" is the custom theme of the Test Antd.

Because it is not familiar with the automatically generated config file, it is decided to use the original less configuration to load it.

After yarn start Restarts the project, you can implement on-demand loading and customizing the theme.

 
 
{
    test: /\.less$/,
    //include: paths.appSrc,
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
         loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "less-loader",// compiles Less to CSS
        options: {
            sourceMap: true,
            modifyVars: {
                ‘primary-color‘: ‘#1DA57A‘,
                ‘link-color‘: ‘#1DA57A‘,
                ‘border-radius-base‘: ‘2px‘,
            },
            javascriptEnabled: true,
        }
    }]
},

The main reason is not familiar with the configuration of Webpack, you have to find time to study it!

If the configuration is not exposed, you can refer to the ANTD official configuration for on-demand loading and customizing the theme. See: Using in Create-react-app

React introduction of ANTD on-demand loading error