title: Antd Import on Demand get error: Variable @import is undefined by less-loader
body: <p>I want to config antd Import on Demand.But I get the error: Variable @import is undefined
  <a href="https://i.stack.imgur.com/K0Y4N.png" rel="nofollow noreferrer">The error screenshots</a></p>
  <p>Why less parse @import as a variable?</p>
  <p>This is my package.json:</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;@babel/preset-typescript&quot;: &quot;^7.16.0&quot;,
      &quot;@pmmmwh/react-refresh-webpack-plugin&quot;: &quot;^0.4.3&quot;,
      &quot;antd&quot;: &quot;^4.17.0-alpha.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      .......
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.15.0&quot;,
      &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.14.5&quot;,
      &quot;@babel/plugin-proposal-decorators&quot;: &quot;^7.14.5&quot;,
      &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.15.0&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.15.0&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.14.5&quot;,
      &quot;babel-plugin-import&quot;: &quot;^1.13.3&quot;,
      &quot;babel-plugin-lodash&quot;: &quot;^3.3.4&quot;,
      &quot;babel-plugin-transform-decorators-legacy&quot;: &quot;^1.3.5&quot;,
      &quot;css-loader&quot;: &quot;^6.2.0&quot;,
      &quot;less&quot;: &quot;^4.1.1&quot;,
      &quot;less-loader&quot;: &quot;^10.0.1&quot;,
      &quot;style-loader&quot;: &quot;^3.2.1&quot;,
      &quot;thread-loader&quot;: &quot;^3.0.4&quot;,
      &quot;ts-loader&quot;: &quot;^9.2.5&quot;,
      &quot;typescript&quot;: &quot;4.3.2&quot;,
      &quot;url-loader&quot;: &quot;^4.1.1&quot;,
      &quot;webpack&quot;: &quot;^5.51.1&quot;,
    }
  </code></pre>
  <p>This is my webpack config:</p>
  <pre><code>{
      rules: [
        {
          test: /\.(js|jsx|ts|tsx)$/,
          use: [
            'thread-loader',
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
              },
            },
          ],
          exclude: /node_modules/,
        },
        {
          test: /.css$/,
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /\.less$/,
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader',
            },
            {
              loader: 'less-loader',
              options: {
                lessOptions: {
                  javascriptEnabled: true,
                  paths: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'src', 'styles'),
                  ],
                  modifyVars: {
                    'root-entry-name': 'default'
                  },
                },
              },
            },
          ],
        },
      ],
    }
  </code></pre>
  <p>And this is my .babelrc.js</p>
  <pre><code>module.exports = (api) =&gt; {
    return {
      presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
      plugins: [
        'lodash',
        [
          'import',
          {
            libraryName: 'antd',
            libraryDirectory: 'es',
            &quot;style&quot;: true
          }
        ],
        ['@babel/plugin-proposal-decorators', { legacy: true }],
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-transform-runtime',
        !api.env('production') &amp;&amp; 'react-refresh/babel',
      ].filter(Boolean),
    };
  };
  
  </code></pre>
  <p>I also had try &quot;ts-import-plugin&quot; with &quot;ts-loader&quot;, finally i get same error.</p>
  <p>Can anyone give any tips?</p>
  <p>Thanks!</p>