arackaf / customize-cra

Override webpack configurations for create-react-app 2.0

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

linjunc opened this issue · comments

same issue

+1

+1

+1

+1

Duplicate of #315

same issue

我也出现了这种现象,原本 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;

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