React introduction of ANTD on-demand loading error

Source: Internet
Author: User
Tags postcss

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 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)

. 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.