Antd 按需加载并使用自定义样式

发表于 | 分类于 ， ，

按需加载

为什么要按需加载？

  • 在使用antd的组件时会自动加载css
  • 大大减少打包后的文件体积

按照官网的介绍使用babel-plugin-loader即可实现，这里就不赘述

按需加载同时使用自定义样式

这里需要用到三个loader

1
npm install --save-dev style-loader css-loader url-loader

webpack配置

在配置的时候我们得写两套样式处理规则，分别处理antd样式和自己的样式

处理Antd样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{ 
  test: /\.css$/,
  use: [
       {
         loader: "style-loader",
       },
       {
         loader: "css-loader",
         options: {
              importLoaders: 1
          }
       }
    ],
  exclude: /app/,    //这里要将自己的排除在规则外
 }

处理自己的样式

1
2
3
4
5
6
7
8
9
10
11
12
{ 
  test: /\.css$/,
  use: [
       {
         loader: "style-loader",
       },
       {
         loader: "css-loader",
       }
    ],
  exclude: /node_modules/,    //这里要将Antd的样式排除
 }

这里还需要注意的是在配置entry的时候，因为我们的antd已经按需加载了，所以无需再重复打包

Do the best!