美文网首页
react安装element-ui与less

react安装element-ui与less

作者: leesession | 来源:发表于2019-03-17 17:28 被阅读0次

安装了好几次之后才跑起来,不容易。。。
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安装就行了。

相关文章

  • React

    安装react脚手架工具create-react-app并创建项目 react配置less 安装less、less...

  • react安装element-ui与less

    安装了好几次之后才跑起来,不容易。。。1.安装create-react-app 2.创建react项目 这时候已经...

  • 在react中使用less

    笔者使用的react版本是16.12.0的,想在react中使用less 第一步 安装less less-load...

  • 搭建antd环境

    1、创建react工厂 从零搭建react开发环境 2、安装antd 3、安装less 4、安装react-rou...

  • vue-Element-UI-登陆/退出

    创建项目 用vue ui创建,选择outer和vuex,less-loader 安装插件element-ui,ax...

  • React项目中使用less并按需引入Antd

    React项目中使用less 1.安装less,less-loader两个包 2.yarn eject暴露出web...

  • react安装less

    使用 create-react-app 脚手架创建项目后,默认是不支持 less 的。所以我们需要手动添加。 第一...

  • 2019-02-26 node+mongoose+vue(二)

    1 Vue中使用less 1.1 首先安装less与less-loader npm install less le...

  • react中使用less

    大概是用习惯了less,所以即使是在react中也希望去使用less写样式1-安装依赖 cnpm install ...

  • 新建react如何支持less文件

    1、首先我们需要一个react的项目; 2、安装我们需要的less和less-roader 3、暴露出我们的web...

网友评论

      本文标题:react安装element-ui与less

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