美文网首页
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安装element-ui与less

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