create-react-app默认配置进行自定义craco
Posted 胖鹅68
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了create-react-app默认配置进行自定义craco相关的知识,希望对你有一定的参考价值。
一、参考
二、问题描述
项目使用 create-react-app 创建项目,UI 使用Ant-UI,现在需要修改antUI的主题,尝试了各种办法,效果不好,最后替换使用 craco 来启动项目
三、 craco 介绍
3.1 craco 快速入门
- 安装依赖
yarn add @craco/craco
或者
npm install @craco/craco --save
- 修改package.json的script
"scripts":
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
-
启动 ——
npm start
-
发布 ——
npm run build
-
添加自定义的配置文件——在根目录下创建 craco.config.js
module.exports =
// ...
;
3.2 修改antUI主题
- 把 src/App.css 文件修改为 src/App.less,然后修改样式引用为 less 文件
src/App.js
- import './App.css';
+ import './App.less';
src/App.less
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
- 安装 craco-less
yarn add craco-less
- 并修改 craco.config.js
const CracoLessPlugin = require('craco-less');
module.exports =
plugins: [
plugin: CracoLessPlugin,
options:
lessLoaderOptions:
lessOptions:
modifyVars: '@primary-color': '#1DA57A' ,
javascriptEnabled: true,
,
,
,
,
],
;
3.3 添加别名
const path = require('path')
const pathResolve = (pathUrl) => path.join(__dirname, pathUrl)
module.exports =
webpack:
// 设置别名
alias:
'@': pathResolve('src'),
'@assets': pathResolve('src/asserts'),
'@images': pathResolve('src/asserts/images'),
'@components': pathResolve('src/components'),
'@hooks': pathResolve('src/hooks'),
'@pages': pathResolve('src/pages'),
'@utils': pathResolve('src/utils')
3.4 设置工程的路径
module.exports =
webpack:
// 返回webpack的配置信息
configure: (webpackConfig, env, paths ) =>
console.log(webpackConfig)
// 设置项目的上下文目录
// webpackConfig.output.publicPath = './hb'
webpackConfig.output.publicPath = './'
return webpackConfig
3.5 添加代理
module.exports =
devServer:
port: 3000,
proxy:
'/interview':
target: 'http://localhost:8080',
changeOrigin: true
以上是关于create-react-app默认配置进行自定义craco的主要内容,如果未能解决你的问题,请参考以下文章
create-react-app中antd按需加载配置+自定义主题