customize-cra icon indicating copy to clipboard operation
customize-cra copied to clipboard

create-react-app 强制更新到了 5.0.0 ,启用的是 webpack5,在配置 less 的时候出现错误 postcss Loader has been initialized using an options object that does not match the API schema,影响项目开展,望修复

Open linjunc opened this issue 2 years ago • 12 comments

linjunc avatar Dec 16 '21 14:12 linjunc

same issue

ThalesMR avatar Dec 17 '21 18:12 ThalesMR

+1

iNiL0119 avatar Dec 18 '21 13:12 iNiL0119

+1

Litao21 avatar Dec 22 '21 07:12 Litao21

+1

Shin1122 avatar Dec 28 '21 02:12 Shin1122

+1

darkfiredarkhalo avatar Jan 07 '22 03:01 darkfiredarkhalo

+1

Chalkzhu avatar Jan 09 '22 12:01 Chalkzhu

https://github.com/arackaf/customize-cra/issues/315#issuecomment-1009628736

mushan0x0 avatar Jan 11 '22 06:01 mushan0x0

+1

dalongjason avatar Jan 18 '22 09:01 dalongjason

Duplicate of #315

leojh avatar Feb 04 '22 04:02 leojh

+1

guo405394956 avatar Feb 10 '22 09:02 guo405394956

same issue

jiangxuzh avatar Jul 25 '22 13:07 jiangxuzh

我也出现了这种现象,原本 customize-cra 的配置 如下

  const { addLessLoader } = require("customize-cra");
  const addLessConfig = () => {
    return [
      addLessLoader({
        javascriptEnabled: true,
        additionalLoaders: ["less-loader"],
        cssModules: {
          localIdentName:
            process.env.NODE_ENV === "development"
              ? "[path][name]__[local]--[hash:base64:5]"
              : "[sha512:hash:base64:7]",
        },
      }),
    ];
  };
  module.exports = addLessConfig;

解决方式是引入了一个新的库 customize-cra-less-loader 看这个库的介绍,是专门为 react-scripts version >= v5.0.0 使用的,因为 react-scripts 依赖的 webpack 是 V5 版本 升级 less less-loader npm i -D customize-cra-less-loader less less-loader

const addLessLoader = require("customize-cra-less-loader");
const addLessConfig = () => {
  return [
    addLessLoader({
      lessLoaderOptions: {
        lessOptions: {
          javascriptEnabled: true,
          additionalLoaders: ["less-loader"],
          cssModules: {
            localIdentName:
              process.env.NODE_ENV === "development"
                ? "[path][name]__[local]--[hash:base64:5]"
                : "[sha512:hash:base64:7]",
          },
        },
      },
    }),
  ];
};
module.exports = addLessConfig;

再运行的时候就成功了,可以参考一下

xia-yu-fei avatar Oct 26 '22 08:10 xia-yu-fei