Ant Design

npm install antd –save

index.js -> import ‘antd/dist/antd.css’;

Import {Button} from ‘antd’;

NPM Run build package size

Import on Demand (CSS)

Solution 1. Modify webpack.config.js

npm i babel-plugin-import -D

The index.js entry removes CSS from the introduction of packaging results as follows

Option 2. Modify package.json

The index.js entry removes CSS from the introduction of packaging results as follows

Use less

1.npm install less-loader less -D

2. Modify the webpack. Config. Js

	const lessRegex = /\.less$/;
	const lessModuleRegex = /\.module\.less$/;
Copy the code

	{
      test: lessRegex, 
       exclude: lessModuleRegex, 
       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,
          javascriptEnabled: true,
        }
     }]
     }, 
    {
      test: lessModuleRegex, 
      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,
          javascriptEnabled: true,
        }
     }]
    }
Copy the code

An error may occur during operation

Cause: The version of less-Loader installed is too high. Solution: Install an earlier version

Using sass

cnpm install node-sass -D

Modify antD theme color – Webpack version

Option 1: Modify webpack.config.js to use antD less

Option 2. Modify package.json to use antD less style

  1. Modify the webpack. Config. Js

  1. The results of

Modify antD theme color – Craco version

  • Using NPM Run eject to modify the CONFIGURATION information of THE CRA is risky if you are not familiar with WebPack. You are advised to modify the configuration information of the CRA directly.

yarn add @craco/craco

Modify the package. The json

Create a craco.config.js file in the project root directory

yarn add craco-less

Modify craco. Config. Js

Modify the file

NPM start to restart

The results of

Configure an alias

Mobile adaptation

npm i lib-flexible postcss-px2rem-exclude –save

webpack.config.js

  • const px2rem = require(‘postcss-px2rem-exclude’);

  • px2rem({remUnit:75,exclude: /node_modules/i})

index.js

  • import “lib-flexible”;

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, The shrink - to - fit = no, minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no "/ >Copy the code

npm start

antd-mobile

cnpm install antd-mobile –save

Use babel-plugin-import, which is a Babel plug-in for loading component code and styles on demand

  • npm install babel-plugin-import –save-dev

Modify the package. The json

Components use

The results of

Use less

1.npm install less-loader less -D

2. Modify the webpack. Config. Js

	const lessRegex = /\.less$/;
	const lessModuleRegex = /\.module\.less$/;
Copy the code

	{
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
      ),
      sideEffects: true,
    },
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
      ),
    },
Copy the code

An error may occur during operation

Cause: The version of less-Loader installed is too high. Solution: Install an earlier version