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


Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.