create-react-app中配置支持less

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

直接比较复杂的项目 还是基于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的主题定制 等
这个你就可以了解了

关注我 持续更新 前端知识