CRA 配置 less-loader 和 devServer

学而不往非礼也

已于 2024-04-18 16:09:47 修改

阅读量775

点赞数 3

文章标签：前端 less

于 2024-04-17 19:18:27 首次发布

本文链接：https://blog.csdn.net/weixin_43599856/article/details/137884326

版权

本文讲述了在使用create-react-app和定制工具如customize-cra或craco时，如何解决less-loader与postcss-loader版本更新带来的配置冲突，包括调整styleLoaders和创建craco.config.js文件以确保less文件正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

eject 不可逆，想试不 eject 情况下改 webpack 配置。

主要介绍的是配置 less-loader 遇到的坑。

正文

1. react-app-rewired + customize-cra

一开始按照 customize-cra - api.md 在 config-overrides.js 中配置 less-loader，然后报错 options has an unknown property 'plugins'. These properties are valid: object { postcssOptions?, execute?, sourceMap?, implementation? }；

原因：postcss-loader 版本原因，有新的配置写法。

源码 customize-cra 1.0.0 addLessLoader 中

// addLessLoader - getStyleLoaders
{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
      }),
      postcssNormalize(),
    ],
    sourceMap: isEnvProduction && shouldUseSourceMap,
  },
}

看了 postcss-loader 8.1.1

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        [
          'postcss-preset-env',
          {
            // Options
          },
        ],
      ],
    },
  },
}

不难看出少了 postcssOptions。当然，在报错信息中是有提