标签：back 属性 ati info conf pre link tps 引入
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
创建完成后文件的结构如下：
src中的文件就是我们项目需要编写的文件
如果我们需要在react项目中使用antd
则需要执行如下命令
npm install antd --save之后执行npm install babel-plugin-import --save（这是按需引入）
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。
const { override, fixBabelImports } = require(‘customize-cra‘); - module.exports = function override(config, env) { - // do stuff with the webpack config... - return config; - }; + module.exports = override( + fixBabelImports(‘import‘, { + libraryName: ‘antd‘, + libraryDirectory: ‘es‘, + style: ‘css‘, + }), + );
之后只需要在组件中引用就行了
// src/App.js import React, { Component } from ‘react‘; import { Button } from ‘antd‘; import ‘./App.css‘; class App extends Component { render() { return ( <div className="App"> <Button type="primary">Button</Button> </div> ); } }
为了加快开发的速度，我们可能需要使用less
npm install less less-loader --save-dev
我们需要运行npm run eject 来暴露webpack的配置文件，你会发现多了config为名的文件夹
之后修改webpack.config.js文件
// 在module中做了三处修改 // 第一处是找到 `test: /\.css$/` 将其改为 `test: /\.(css|less)$/` // 第二处是增加 `less-loader`的配置 // 第三处是在exclude属性中增加 `/\.(css|less)$/` // 具体修改如下 module: { ... { // test: /\.css$/ 第一处 test: /\.(css|less)$/, use: [ require.resolve(‘style-loader‘), ... // 第二处 { loader: require.resolve(‘less-loader‘) } ] }, { exclude: [ /\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, // 第三处 /\.(css|less)$/, ] } }
之后重启项目就可以用less了
标签：back 属性 ati info conf pre link tps 引入
原文地址：https://www.cnblogs.com/sisxxw/p/12514498.html
