create-react-app中配置支持less

news/2024/10/30 17:23:09/

这玩意确实挺好但如果想开发一个完整的项目很多配置都得自己来搞
相当于从零开始了

直接比较复杂的项目还是基于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 loaderwebpackConfig.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,},},},},],
};