深坑react 引入antd无效问题

Posted nimon-hugo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深坑react 引入antd无效问题相关的知识,希望对你有一定的参考价值。

//安装babel-plugin-import
第一步:
npm install babel-plugin-import --save




第二步:暴露webpack.config.js
运行:npm run eject


第三步:在webpack.config.js中的module下的oneOf数组里加入下面代码:

 {//ES6、JSX处理
              test: /(.jsx|.js)$/,
              exclude: /node_modules/,
              loader: ‘babel-loader‘,
              query:
              {
                plugins: [
                  [
                    "import",
                    { libraryName: "antd", style: ‘css‘ }
                  ] //antd按需加载
                ]
              },
            },

            {//CSS处理
              test: /.css$/,
              loader: "style-loader!css-loader?modules",
              exclude: /node_modules/,
            },

            {//antd样式处理
              test: /.css$/,
              exclude: /src/,
              use: [
                { loader: "style-loader", },
                {
                  loader: "css-loader",
                  options: {
                    importLoaders: 1
                  }
                }
              ]
            },

重启项目即可;

以上是关于深坑react 引入antd无效问题的主要内容,如果未能解决你的问题,请参考以下文章

React + Antd + Rollup 组件库“错误:无效的钩子调用。钩子只能在函数组件的主体内部调用”

react antd插件引入

在react项目中按需引入antd

React使用antd按需引入报错

React引入AntD按需加载报错

React UI组件库——如何快速实现antd的按需引入和自定义主题