标签：less App js react craco import antd
react脚手架 + antd的craco.config.js配置
拉取脚手架执行以下命令
标题安装antd
修改 src/App.js，引入 antd 的按钮组件
修改 src/App.css，在文件顶部引入 antd/dist/antd.css
高级配置
安装 craco 并修改 package.json 里的 scripts 属性
然后在项目根目录创建一个 craco.config.js 用于修改默认配置
自定义主题
然后安装 craco-less 并修改 craco.config.js 文件如下
支持装饰器语法和配置代理
配置antd的less按需加载（则反打包后，会增大css文件）
配置别名
拉取脚手架执行以下命令
$ npx create-react-app antd-demo -> 启动 cd antd-demo -> yarn start
标题安装antd
yarn add antd
修改 src/App.js，引入 antd 的按钮组件
import React from 'react';
import { Button } from 'antd';
import './App.css';
const App = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default App;
修改 src/App.css，在文件顶部引入 antd/dist/antd.css
@import '~antd/dist/antd.css'; //可以在页面看到蓝色按钮组件了
1
高级配置
安装 craco 并修改 package.json 里的 scripts 属性
yarn add @craco/craco
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
然后在项目根目录创建一个 craco.config.js 用于修改默认配置
/* craco.config.js */
module.exports = {
// ...
};
自定义主题
/* src/App.js */
- import './App.css';
+ import './App.less';
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
然后安装 craco-less 并修改 craco.config.js 文件如下
yarn add craco-less
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
支持装饰器语法和配置代理
yarn add @babel/plugin-proposal-decorators --dev //用来支持装饰器
//在craco.config.js文件下的module.exports添加如下代码
babel:{
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }]
]
},
//配置代理解决跨域
devServer: {
proxy: {
"/api": {
target: "http://baidu.com",
//target: 'http://192.168.9.19:8080',
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
}
配置antd的less按需加载（则反打包后，会增大css文件）
yarn add babel-plugin-import
//在craco.config,.js里加上
babel:{
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }], //装饰器
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": true //设置为true即是less
}
]
]
},
到App.less文件去掉@import '~antd/dist/antd.less';，
//按需加载后只需引入组件，无需再额外引入样式文件，babel会自动按需帮你完成样式的引入。这样打包出来的文件会更小。
配置别名
//在craco.config,.js里加上
const path = require('path');
module.exports = {
webpack: {
// 别名
alias: {
"@": path.resolve("src"),
"@utils": path.resolve("src/utils"),
}
},
}
标签：less,App,js,react,craco,import,antd 来源： https://blog.csdn.net/qq_40999917/article/details/120960901
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。