美文网首页
Antd 按需加载并使用自定义样式

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

作者: PoWerfulHeart | 来源:发表于2019-04-19 18:58 被阅读0次

一. 按需加载

为什么要按需加载?
1.在使用antd的组件时会自动加载css
2.大大减少打包后的文件体积

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

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

这里需要用到三个loader

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

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

处理Antd样式

  { 
    test: /\.css$/,
    use: [
         {
           loader: "style-loader",
         },
         {
           loader: "css-loader",
           options: {
                importLoaders: 1
            }
         }
      ],
    exclude: /app/,    //这里要将自己的排除在规则外
   }

处理自己的样式

  { 
    test: /\.css$/,
    use: [
         {
           loader: "style-loader",
         },
         {
           loader: "css-loader",
         }
      ],
    exclude: /node_modules/,    //这里要将Antd的样式排除
   }

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

相关文章

网友评论

      本文标题:Antd 按需加载并使用自定义样式

      本文链接:https://www.haomeiwen.com/subject/vzbcgqtx.html