安装了好几次之后才跑起来,不容易。。。
1.安装create-react-app
npm install -g create-react-app
2.创建react项目
create-react-app element-demo
cd element-demo
npm start
这时候已经创建好了一个react项目
3.安装element-ui,需要安装2个包,可以通过cnpm安装
npm i element-react --save
npm install element-theme-default --save
4.在App.js中引入,测试下引入效果
import { Button } from 'element-react';
import 'element-theme-default';
<Button type='primary'>button</Button>
5.引入element-ui之后,你会发现报错,是因为少了一个包名。这时候自己安装这个包就行
npm install ‘包名’
6.安装好之后重启就会看见,引入了button,开始下一步,安装less
npm install --save less less-loader
7.将webpack配置暴露出来
npm eject
8.找到 config/webpack.config.js,然后打开,找到如下位置并修改(3个地方)
1.const cssRegex = /\.css$/; 改为 const cssRegex = /\.css|less$/;
2.找到 const loaders=[{...},{...},{...}] ,在该数组的最后一个json后,
添加一个json,{ loader: require.resolve('less-loader')},
3.找到 loader: require.resolve('file-loader'),修改exclude为:
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/,/\.(css|less)$/],
9.less安装完成,写个App.less替换App.css测试下,如果没问题就好。我是出现了问题,报了:没有这个 : babel-preset-react-app ,用npm安装
npm install babel-preset-react-app --save-dev
10.安装完成,重启npm start,可看到less成功与否。注:部分时候会有node包未安装,自己 install安装就行了。