react 脚手架搭建-引入antd与遇到问题解决

1.ejcet问题

另一篇博客已经写解决办法了

2.不可以编译less问题

由于新的脚手架 配置文件变成了webpack.config.js 
里面的配置和原来也不一样了
1.首先安装less-loader (yarn add less-loader)
2.在webpack.config.js配置
	在38行配置
	const cssRegex = /\.css$/;
	const cssModuleRegex = /\.module\.css$/;
	const sassRegex = /\.(scss|sass)$/;
	const sassModuleRegex = /\.module\.(scss|sass)$/;
	const lessRegex = /\.(less)$/;
	const lessModuleRegex = /\.module\.(less)$/;
	ctor+f 检索 cssRegex
	在cssRegex 对象下面粘贴这段代码
	{
        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'
       ),
     },

3.提示less错误的话

就安装less就可以 （yarn add less）

4. 还会报错

./node_modules/antd/es/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-5-	
1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-5-
3!./node_modules/antd/es/button/style/index.less)
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
Inline JavaScript is not enabled. Is it set in your options?
。。。bezierEasing.less (line 110, column 0)

解决办法 ：less版本太高，降到2.7.3 （yarn add less@2.7.3）

5. 配置antd （配置后组件就可以单独引入了，不用引入css文件）

1.yarn add antd
2.yarn add babel-plugin-import
3.在webpack.config.js 中检索 babel-preset-react-app/webpack-overrides 
	将plugins 修改成以下代码
plugins: [
  ["import", {
     "libraryName": "antd",
     "libraryDirectory": "es",
     "style": true // `style: true` 会加载 less 文件
   }],
   [
     require.resolve('babel-plugin-named-asset-import'),
     {
       loaderMap: {
         svg: {
           ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
         },
       },
     },
   ],
 ],