- 综合排序
- 最热优先
- 最新优先
- 来自专栏无人打理的花园
craco 中的图片处理
使用 craco 覆盖框架默认的 webpack 配置 从前我以为 HTTP/2 开启以后，雪碧图可以逐渐退出舞台，现在感觉到自己的天真。 // craco.config.js const SpritesmithPlugin = require("webpack-spritesmith"); ... algorithm: "binary-tree", // 生成的雪碧图图标排列方式 padding: 2 // 图标的间隔 } }) ] } // craco 未完 参考资料 基于Webpack的CSS Sprites实现方案 webpack雪碧图生成 Webpack3之雪碧图插件（WEBPACK-SPRITESMITH配置简述） add-stylelint/craco.config.js
2K10发布于 2019-07-31 - 来自专栏lonelydawn的前端猿区
craco配置devServer.proxy
在使用 craco（Create React App Configuration Override）创建的React项目中配置devServer.porxy只需要修改craco.config.js即可， }, }; 这样，我们就可以通过命令向devServer传参数来快速启动各个环境，而不用在切换时去修改这些值了，命令如下： { "scripts": { "start": "craco start", "sandbox": "env DATA_ENV='sandbox' craco start", "online": "env DATA_ENV='online ' craco start", }, }
2.4K51编辑于 2023-03-11 - 来自专栏RxJS
使用 craco 对 cra 项目进行构建优化
覆盖配置这里我选择的是 craco 安装 安装依赖 yarn add @craco/craco 修改 pacage.json 中的命令 { "scripts":{ "start": "craco start", "build": "craco build", "test": "craco test" } } 在根目录创建 craco.config.js 配置文件 /* webpack: {}, babel: {}, } 基础的配置到此完成了，接下来是处理各种配置的覆盖，完整的 craco.config.js 配置文件结构，可以在 craco 官方的文档中详细查询 目前的 craco 最新版本 v6.4.3 仅支持 cra4 创建的项目 构建体积分析首先引入了 webpack-bundle-analyzer 这个插件来分析一下构建产物的组成 /* craco.config.js 附上配置 // craco.config.js const path = require('path'); const CracoLessPlugin = require('craco-less');
1.9K20编辑于 2022-09-29 - 来自专栏分享学习
React系列：配置@别名路径并配置联想
/pages/Login' import Layout from '@/pages/Layout' 配置craco 针对路径转换，修改webpack别名路径配置 craco 安装 npm install @craco/craco 创建craco.config.js const path = require('path') module.exports ={ webpack:{
90310编辑于 2023-12-19 - 来自专栏每周聚焦
react项目的@路径配置
安装craco yarn add @craco/craco 2.根路径下创建 craco.config.js const path = require("path") module.exports = 修改package.json文件的script字段 "scripts": { "start": "craco start", "build": "craco build ", "test": "craco test", "eject": "react-scripts eject" }, 4.使用 import "@/router
1.6K10编辑于 2022-09-20 - 来自专栏lonelydawn的前端猿区
npm是如何执行scripts中命令的？
过去一直有一个疑问，为什么我在命令行运行 npm start，可以正常启动 webpack，而直接使用 craco start 不行？ 后半句很好理解，直接使用 craco start 会从系统的环境变量 $PATH 中查找 craco，因为之前没有配置过所以找不到。但是， npm 为什么能执行呢？ less 或 craco 这样的 npm 包自己的 package.json 中包含一句 "bin" : { "craco" : ". /bin/craco.js" }, 在运行 npm install craco 时，npm 会检索到这项配置并将 craco 包中 /bin/craco.js 软链到 node_modules/.bin 中 ] 之后再运行 npm start (craco start) 时，npm 会直接执行 node node_modules/.bin/craco start
1.2K20编辑于 2022-09-07 - 来自专栏前端开发随笔
React引入antd组件库
return ( <Button type="primary">Button</Button> ) } 如果需要自定义主题颜色 安装@craco /craco可以无需暴露webpack进行配置覆盖 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", } 安装less yarn add craco-less 首先把 src/App.css 如src同级 const CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin
1.2K10发布于 2021-06-11 - 来自专栏边城浪子周刊
更骚的create-react-app开发环境配置craco
覆盖配置 第二种方式相对第三种略复杂一些，我自己很有体会并且我们注意到最新的AntDesign4 官方也开始推荐 craco 了，那我们还等什么还不快行动起来，今天主要在这里详细讨论一下 craco /craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D 3、修改 package.json 中的 scripts "test": "craco test" } } 4、项目根目录创建 craco.config.js 文件 /* craco.config.js */ module.exports = { . 也提供了专门的 plugin 来处理 antd 的集成（传送门）配置方式有区别 Craco自定义支持 craco-antd includes:Less (provided by craco-less) 注意：_configure配置和_craco配置会互斥谨慎使用 以下，是我整理完整的 craco.config.js 配置，相应的demo方便参照 craco 还提供一些其他 plugin具体根据实际情况自行加入
8.5K54发布于 2020-11-19 - 来自专栏小丞前端库
React 入门学习（十三）-- antd 组件库的基本使用
我觉得这不是一个好方法~ 在 antd 最新版中，引入了 craco 库，我们可以使用 craco 来实现自定义的效果 首先我们需要安装 craco yarn add @craco/craco 同时我们需要更改 package.json 中的启动文件 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }, 更改成 craco 执行 接下来我们需要在根目录下新建一个 craco.config.js 文件，用于配置自定义内容 const CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin:
3.2K30编辑于 2022-11-15 - 来自专栏java开发的那点事
05-React Antd UI库
Antd使用craco按需加载样式与自定义主题 因为最新的版本工具已经改成了craco, 所以基于craco去做 yarn add @craco/craco babel-plugin-import craco-less //去除 - "build": "react-scripts build", //去除 - "test": "react-scripts test", //去除 + "start": "craco start", //添加 + "build": "craco build", //添加 + "test": "craco test", //添加 } 在根目录下新增配置文件 craco.config.js const CracoLessPlugin = require("craco-less"); module.exports = { //按需引入 babel: { plugins:
1.3K30编辑于 2022-08-24 - 来自专栏前端必修课
掌握 Ant Design 主题定制实战指南
菜单中，刚好我们项目是通过这种方式创建的，在这个菜单中告诉我们有一个高级配置： 高级配置中介绍到对 create-react-app 的默认配置进行自定义，这里我们使用 craco，那么 craco ： npm install @craco/craco 修改启动命令，在 package.json 文件中修改启动命令： /* package.json */ "scripts": { - "start start", + "build": "craco build", + "test": "craco test", } 为什么要修改启动命令呢？ 我们可以引入 craco-less 来帮助加载 less 样式和修改变量，所以我们需要安装 craco-less： npm install craco-less 然后在 craco.config.js 文件中引入 craco-less： /* craco.config.js */ + const CracoLessPlugin = require('craco-less'); module.exports
87810编辑于 2025-03-07 - 来自专栏小丞前端库
React 入门学习（十三）-- antd 组件库的基本使用
我觉得这不是一个好方法~ 在 antd 最新版中，引入了 craco 库，我们可以使用 craco 来实现自定义的效果 首先我们需要安装 craco yarn add @craco/craco 同时我们需要更改 package.json 中的启动文件 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }, 更改成 craco 执行 接下来我们需要在根目录下新建一个 craco.config.js 文件，用于配置自定义内容 const CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin:
2.3K11发布于 2021-09-29 - 来自专栏『Ts + React』项目实战
『Ant Design』主题定制
菜单中，刚好我们项目是通过这种方式创建的，在这个菜单中告诉我们有一个高级配置： 高级配置中介绍到对 create-react-app 的默认配置进行自定义，这里我们使用 craco，那么 craco ： npm install @craco/craco 修改启动命令，在 package.json 文件中修改启动命令： /* package.json */ "scripts": { - "start start", + "build": "craco build", + "test": "craco test", } 为什么要修改启动命令呢？ 我们可以引入 craco-less 来帮助加载 less 样式和修改变量，所以我们需要安装 craco-less： npm install craco-less 然后在 craco.config.js 文件中引入 craco-less： /* craco.config.js */ + const CracoLessPlugin = require('craco-less'); module.exports
1.4K50编辑于 2024-01-28 - 来自专栏无人打理的花园
CRA (create-react-app) IE 兼容方案
需要使用 craco (或者 react-app-rewired) 覆盖框架的 webpack 和 babel配置。 最后我的 craco 配置如下： // craco.config.js ... const babel = { plugins: [ "@babel/plugin-transform-proto-to-assign ，需要手动引入一个 polyfill： Object.setPrototypeOf = require('setprototypeof') 使用dva和ant-design组件在IE中的兼容问题记录 craco
4.2K20发布于 2019-07-25 - 来自专栏前端专享
创建 React 应用的 7 种方式，你用过几种？
因此社区中提供了一些可配置的 cra 方案，craco、react-app-rewired craco 可配置的 cra 这里以 craco 为例，首先需要安装 @craco/craco yarn add @craco/craco 我们只需要将 react-script 替换为 craco /* package.json */ "scripts": { - "start": "react-scripts ", + "build": "craco build", + "test": "craco test", } 然后在项目根目录创建一个 craco.config.js 用于修改默认配置。 /* craco.config.js */ module.exports = { webpack: { configure: (webpackConfig, { env, paths }) 的官网也非常清晰，还提供了 plugin 模式，若你想覆盖 cra 的配置，可以先在 plugins 里面找找，比如上面提到的，让项目支持 less，就可以直接使用 craco-less 这个插件。
9.5K10编辑于 2023-03-16 - 来自专栏前端LeBron
[探索]前端路由Router原理
react-router 简介 快速开始 npx create-react-app router-nut cd router-nut yarn start 配置 less 与装饰器 yarn add @craco /craco craco-less @babel/plugin-proposal-decorators 根目录下添加 craco.config.js 文件 // * 配置完成后记得重启下 const CracoLessPlugin = require("craco-less"); module.exports = { babel: { //用来支持装饰器 plugins: [[ plugins: [ { plugin: CracoLessPlugin } ] }; 修改 package.json "scripts": { "start": "craco start", "build": "craco build", "test": "craco test" }, react-router 简介 react-router 包含 3
3.2K20编辑于 2021-12-08 - 来自专栏无人打理的花园
create-react-app (CRA) 项目开启 sass sourcemap
官方不支持本地调试开启 sass 的 sourcemap（今年 3 月的某个版本曾经支持过），笔者也没有找到 react-app-rewired 支持的方法，所以修改了 config-overrides.js 使用了 craco 所以最后还是参考了这个方法，修改了 config-overrides.js，改用 craco 轻松实现。 注：eject 方案不推荐使用，CRA 的目的即是开箱即用。
1.9K20发布于 2019-07-18 - 来自专栏GoCoding
React MobX 开始
yarn add antd @ant-design/icons 高级配置[5]， yarn add @craco/craco -D yarn add craco-less craco.config.js 配置了深色主题： const path = require('path'); const CracoLessPlugin = require('craco-less'); const { getThemeVariables
1.4K10编辑于 2021-12-30 - ) export default App 2.2 craco.config.js 配置 // 安装 npm install @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", } 2.2.1 修改 antd 主题色 安装 craco-less npm install craco-less craco.config.js 配置 const CracoLessPlugin = require('craco-less') module.exports = {来自专栏全栈程序员必看
react全家桶包括哪些_react 自定义组件
div className="App"> <Button type="primary">Button</Button>
7.1K20编辑于 2022-11-18
React通过@craco/craco代理接口
craco.config.js文件 module.exports = { // 代理接口 devServer: { proxy: { '/api'
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号