react antd基础项目1

//App.js
import React from 'react';
import './App.less';

function App() {
  return (
    <div className="App">
      <button>HTML按钮</button><br />
      <ul>
        <li>React</li>
        <li>antD</li>
        <li>less</li>
        <li>axios</li>
        <li>react-router</li>
      </ul>
    </div>
  );
}
export default App;

//App.less
.App {
    margin-top: 10px;
    text-align: left;
    ul {
        list-style-type: none;
        color: blue;
    }
}

//App.js
import React from 'react';
import './App.less';
import {Button} from "antd";
import "antd/dist/antd.css"
function App() {
  return (
    <div className="App">
      <button>HTML按钮</button><br />
      <Button>AntD按钮</Button><br />
      <ul>
        <li>React</li>
        <li>antD</li>
        <li>less</li>
        <li>axios</li>
        <li>react-router</li>
      </ul>
    </div>
  );
}
export default App;

//App.less
.App {
    margin-top: 10px;
    text-align: left;
    ul {
        list-style-type: none;
        color: blue;
    }
}

区别：使用了babel-plugin-import按需加载样式，由此在App.js中可以省略import “antd/dist/antd.css”

//App.js
import React from 'react';
import './App.less';
import {Button} from "antd";//使用es6结构导入一个组件

function App() {
  return (
    <div className="App">
      <button>HTML按钮</button><br />
      <Button>AntD按钮</Button><br />
      <ul>
        <li>React</li>
        <li>antD</li>
        <li>less</li>
        <li>axios</li>
        <li>react-router</li>
      </ul>
    </div>
  );
}
export default App;

//App.less
.App {
    margin-top: 10px;
    text-align: left;
    ul {
        list-style-type: none;
        color: blue;
    }
}

//修改webpack.config.js中的内容
        { 
          loader: require.resolve("less-loader"),
          options: {
            javascriptEnabled: true,
            modifyVars:{//修改less变量
              "@primary-color":"green" //"@primary-color":"red"(见右图)
            }
          },
        }