这玩意确实挺好 但如果想开发一个完整的项目 很多配置都得自己来搞
相当于从零开始了
直接比较复杂的项目 还是基于umi进行开发吧
比如项目中我想配置使用less 都得让我自己去搞着配置webpack
有的博客可能让你直接运行 npm run eject让后暴露出来webpack的配置文件 然后在里面更改
不是上面的那种哈 是另一种方式 就是使用 @craco/craco
pnpm add @craco/craco -D
or
npm i @craco/craco -D
这玩意介绍下哈
craco是一个用于在create-react-app项目中覆盖webpack配置的包。它允许您在不弹出的情况下修改webpack配置。通过使用craco,您可以修改webpack配置以添加加载器、插件和其他自定义内容。
然后启动的一些 script脚本命令就需要更改下了
// 在package.json文件中 react-scripts -> craco 需要更改下
"scripts": {
"start": "craco start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
你覆盖人家create-react-app中的默认webpack配置 那么你也得需要一个配置文件了
在package.json同级别目录下 创建一个 craco.config.js文件
还得安装less编译需要的东西
pnpm add less less-loader -D
然后呢
// craco.config.js
const path = require('path');
module.exports = function ({ webpackConfig }) {
// Add the LESS loader
webpackConfig.module.rules.push({
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
],
include: path.resolve(__dirname, 'src'),
});
return webpackConfig;
};
完成之后 我们在App.js or App.ts中引入一个 test.less
配置完成后 记得重新启动项目哦 npm start
bingo 然后发现是不是 没生效 是不是很嘛呢
其实吧 上面的配置方法 可能都不会生肖 如果你的版本比较低的话
webpack 和 @craco/craco 那你就换一种写法 去官网看下 最新的配置方法
const path = require('path');
module.exports = {
webpack: {
configure: (webpackConfig) => {
webpackConfig.module.rules.push({
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
],
include: path.resolve(__dirname, 'src'),
});
console.log(webpackConfig.module.rules, 'rules')
return webpackConfig
}
}
}
然后再重启 npm start
。。。。。
是不是发现还没有生效 气死人了
郁闷了半天 是哪里出了问题 然后就闲着没事 在官网一顿乱逛
发现了一个有意思的插件
craco-less
pnpm add craco-less -D
然后去看了下配置
const CracoLessPlugin = require("craco-less");
module.exports = {
plugins: [
{ plugin: CracoLessPlugin }
],
}
重启 npm start
发现生效了
很神奇
当然这玩意里面也支持 你去更改less-loader的options
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: {
"@primary-color": "#1DA57A",
"@link-color": "#1DA57A",
"@border-radius-base": "2px",
},
javascriptEnabled: true,
},
},
},
},
],
};
比如你要做的是 ant的主题定制 等
这个你就可以了解了
关注我 持续更新 前端知识