does not support import remote css as less in less files

Versions

• dumi: 1.1.23
• node: v14.15.4
• npm: 6.14.11
• OS: macOS Big Sur 11.2.3
• Browser: Edge 91.0.864.67

Steps to reproduce

在组件的 less 样式文件里通过 @import 语法引入 web url 地址

@import (less) url('https://at.alicdn.com/t/font_2673961_hg2vb7cj7i.css');

.a {
  color: red;
}

What is Expected?

正确加载

What is actually happening?

启动时报错

[PeachScript]

@RunningCoderLee 理解了，Umi 自带的 less-loader 是锁到 5.0 的，背后是 3.x 的 Less.js，你使用的这个功能应该是 Less.js 4.0 出来的，所以要使用这个特性只能覆盖默认的 less-loader

[RunningCoderLee]

这个不算是用法问题吧，我单纯使用 webpack 的 demo 项目去验证这个场景是没有问题的

发现一个解决方案

在 .umirc.ts 中用 chainWebpack 更改 umi 引入的 less-loader 是可以解决这个问题的

import { defineConfig } from 'dumi'
import path from 'path'

export default defineConfig({
  chainWebpack(memo, { env, webpack, createCSSRule }) {
    // 替换 umi 自带的 less-loader 以解决 less 文件中 import web url 报错的问题
    memo.module
      .rule('less')
      .oneOf('css')
      .use(
        path.resolve(
          __dirname,
          'node_modules/@umijs/bundler-webpack/node_modules/@umijs/deps/compiled/less-loader/cjs.js',
        ),
      )
      .loader(require.resolve('less-loader'))
      .tap((options) => ({
        lessOptions: options,
      }))
  },
})

是不是引入的 loader 有问题？

顺带一提，在还没有明确问题根本原因前，能不能先不关闭 issue 并添加无效标签？

@PeachScript