Using antd

The installation

yarn add antd
Copy the code

configuration

You still need to use babel-plugin-import, but this is not explained in the introduction documentation for V4. Go to v3 — antd@v3 – Advanced configuration

yarn add babel-plugin-import -D
Copy the code

It is not enough to install babel-plugin-import, you also need to install less and less-loader

yarn add less less-loader -D
Copy the code

After the installation, the configuration is divided into the following two steps:

  • inbabel-loaderthepluginIn the configuration itembabel-plugin-import
module.exports = {
  module: {
    rules: [{test: /\.(js|jsx|tsx|ts)? $/,
        exclude: /(node_modules)/,
        loader: 'babel-loader'.options: {
          plugins: [['import',
              {
                libraryName: 'antd'.style: true,},],],},},],},};Copy the code
  • configurationless-loader

If the following error is encountered in your project, it is because less-Loader is not installed

Less processing requires at least three related Loaders, which is the following configuration sequence

module.exports = {
  module: {
    rules: [{test: /\.less$/,
        use: [
          isDevelopment && {
            loader: 'style-loader',
          },
          isProduction && {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: true.publicPath: '.. /.. / ',}}, {loader: 'css-loader'}, {loader: 'less-loader',},],},],},};Copy the code

Less-loader must be configured separately for less written in the project and LESS in ANTD

module.exports = {
  module: {
    rules: [{test: /\.less$/,
        exclude: /node_modules/.// Write less by yourself during project development
        use: [
          isDevelopment && {
            loader: 'style-loader',
          },
          isProduction && {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: true.publicPath: '.. /.. / ',}}, {loader: 'css-loader'.options: {
              esModule: true.modules: {
                localIdentName: isDevelopment
                  ? '[path][name]__[local]'
                  : '[hash:base64]',},},}, {loader: 'postcss-loader'.options: {
              postcssOptions: {
                plugins: [
                  'postcss-flexbugs-fixes'.'autoprefixer'.'postcss-preset-env'['@fullhuman/postcss-purgecss',
                    {
                      content: [
                        path.join(__dirname, './public/index.html'),
                        ...glob.sync(
                          `${path.join(__dirname, 'src')}/**/*.jsx`,
                          {
                            nodir: true,},),],},],],},},},}, {loader: 'less-loader'.options: {
              lessOptions: {
                paths: [path.resolve(__dirname, 'src')],
              },
            },
          },
        ].filter(Boolean),}, {test: /\.less$/,
        include: /node_modules/./ / antd less
        use: [
          isDevelopment && {
            loader: 'style-loader',
          },
          isProduction && {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: true.publicPath: '.. /.. / ',}}, {loader: 'css-loader'}, {loader: 'less-loader'.options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ].filter(Boolean),},],},};Copy the code

This is because most configurations after WebPack 4 will enable CSS Module configuration in CSS-loader, that is, this configuration will also hash the ANTD CSS file name by default, so after introducing ANTD component into the project, The style won’t work; However, if you exclude the node_modules folder directly, antD will not be found, so you will have to configure it separately

{
  loader: "css-loader".options: {
      esModule: true.modules: {
          localIdentName: isDevelopment
            ? "[path][name]__[local]"
          : "[hash:base64]",,}}}Copy the code

Note that for ANTD less, the les-Loader needs to configure javascriptEnabled: true. If the following error occurs, it is not configured correctly. In addition, the configuration method of less-Loader VERSION v5 is different from that of version V6 +. For VERSION V5, you can directly configure the configuration in Options, while for version V6 +, you can configure the configuration in options.lessOptions

/ / the v5 version
{
  loader: "less-loader".options: {
    javascriptEnabled: true,}},/ / v6 + version
{
  loader: "less-loader".options: {
    lessOptions: {
      javascriptEnabled: true,}}},Copy the code