Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
linjunc opened this issue Dec 16, 2021 · 12 comments

Comments

@linjunc
Copy link

linjunc commented Dec 16, 2021

No description provided.

@ThalesMR
Copy link

same issue

@iNiL0119
Copy link

+1

4 similar comments
@Litao21
Copy link

Litao21 commented Dec 22, 2021

+1

@Shin1122
Copy link

+1

@darkfiredarkhalo
Copy link

+1

@Chalkzhu
Copy link

Chalkzhu commented Jan 9, 2022

+1

@mushan0x0
Copy link
Contributor

#315 (comment)

@dalongjason
Copy link

+1

@leojh
Copy link

leojh commented Feb 4, 2022

Duplicate of #315

@guo405394956
Copy link

+1

@jiangxuzh
Copy link

same issue

@xia-yu-fei
Copy link

xia-yu-fei commented Oct 26, 2022

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests