配置antd按需引入时less-loader报Variable @import is undefined错误如何解决

问题原因 #

你遇到的Variable @import is undefined报错，本质是less解析阶段把@import关键字错误识别为less变量调用，核心触发原因有三个常见场景：

1. 你使用的antd@4.17.0-alpha.0是测试版本，本身存在样式导入的兼容性bug，和less v4的语法规则不兼容
2. less v4+默认启用了严格的语法校验，低版本antd的部分less写法不符合v4的语法要求
3. 你的webpack css匹配规则存在书写疏漏，可能导致样式文件被错误的loader处理

解决方案 #

按优先级依次尝试：

• 首先把antd降级到稳定正式版，推荐antd@4.16.13（4.17正式版之前的最后一个稳定版本，和less4/less-loader10兼容性经过验证）
• 如果不想降级antd，在lessOptions里新增严格语法关闭配置：

lessOptions: {
  javascriptEnabled: true,
  strictMath: false,
  strictImports: false,
  // 原有其他配置不变
  paths: [
    path.resolve(__dirname, 'node_modules'),
    path.resolve(__dirname, 'src', 'styles'),
  ],
  modifyVars: {
    'root-entry-name': 'default'
  },
}

• 修正webpack中css规则的正则书写错误，把test: /.css$/改为test: /\.css$/，避免正则匹配异常
• 如果以上方案都不生效，可以把babel-plugin-import的style: true改为style: 'css'，直接引入antd编译后的css文件，跳过less编译步骤，也能实现按需引入，只是不能自定义主题色

排查思路 #

如果还是报错可以按以下步骤定位：

1. 先注释掉babel-plugin-import的antd按需引入配置，手动在全局引入antd的全量css文件，看是否还报错，排除全局配置问题
2. 单独新建一个空的less文件，只写一行@import语句引入本地的less文件，看是否报错，排除less/less-loader本身的安装/配置问题
3. 把less版本降级到3.x版本，比如less@3.13.1，看是否是版本兼容性问题

内容的提问来源于stack exchange，提问作者pbgf