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

🐛 [BUG] antd pro 报错 @import (reference) '~antd/es/style/themes/index'; Less resolver error #10814

Closed
vwalexanderjin opened this issue Jun 27, 2023 · 3 comments
Labels

Comments

@vwalexanderjin
Copy link

ant-design-pro版本:6.0.0-beta.1

出现如下错误导致项目无法运行:
@import (reference) '~antd/es/style/themes/index'; Less resolver error

@JarvisChan666
Copy link

同樣遇到,突然报错

@chenshuai2144
Copy link
Collaborator

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成,可以尝试下方案,官方人员会在一定时间后继续继续处理。

抱歉听到您遇到了这个问题。根据您提供的错误信息,这可能是由于 antd 的样式文件引入错误导致的。以下是一些可能的解决方案:

  1. 确保您的项目中已经安装了 antdless
npm install antd less
  1. 确保您的项目中已经正确配置了 less-loader。在 webpack 配置文件中找到对 less 文件的加载器配置,确保以下配置:
module: {
  rules: [
    // ...
    {
      test: /\.less$/,
      use: [
        { loader: "style-loader" },
        { loader: "css-loader" },
        {
          loader: "less-loader",
          options: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      ],
    },
  ],
},

请注意:这是一个示例配置,具体的配置可能因您的项目而异。

  1. 如果您的项目使用了 umicreate-react-app 这样的脚手架工具,则需要在您的项目根目录下创建一个 config-overrides.js 文件,并添加以下内容:
const path = require('path');

module.exports = function override(config, env) {
  // 添加 antd 的样式路径别名
  config.resolve.alias = {
    ...config.resolve.alias,
    '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons.js'),
    'antd/lib/style/themes': path.resolve(__dirname, './src/styles/themes.less'),
  };

  return config;
};
  1. 如果您的项目在使用 TypeScript,还需要在 tsconfig.json 文件中添加以下配置:
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

希望以上解决方案能够帮助您解决这个问题。如果问题仍然存在,请提供更多的错误信息,以便我们能够更好地帮助您解决问题。另外,您也可以参考 antd 官方文档(https://ant.design/docs/react/introduce-cn)寻找更多关于 antd 的用法和配置信息。

@chenshuai2144
Copy link
Collaborator

值得注意是的百分之二十的问题都可以用重装依赖来解决,所以你可以尝试一下:
删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

这个报错是由于在antd pro的Less文件中,引用了一个找不到的路径导致的。解决方案如下:

  1. 首先,确认你的项目中是否已经安装了antd和antd pro,并且版本号正确。

  2. 确认报错提示中提到的文件路径'~antd/es/style/themes/index'是否存在于你的项目中。如果不存在,可以尝试在项目根目录的node_modules文件夹中搜索该文件,看看确实不存在。

  3. 如果确实不存在,可以尝试使用'~antd/es/style/index.less'替换掉'~antd/es/style/themes/index',然后重新运行项目。

  4. 如果还是报错,可以尝试检查一下你的less-loader的配置,确保正确引入了antd的主题文件。

以上是基于错误信息的分析和解决方案,希望对你有所帮助。如果还有其他问题,请随时提问。

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

No branches or pull requests

3 participants