does not support import remote css as less in less files

[RunningCoderLee]

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]

Less 用法问题请从搜索引擎或 StackOverflow 之类的社区找答案

[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

[PeachScript]

@RunningCoderLee 可以看下这个：less/less.js#3188 (comment)

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

抱歉让你不适，我理解上面的 issue 很容易被搜索到所以直接关了，下次我把信息补齐再关

[RunningCoderLee]

感谢你提供的链接，我去看了，但我感觉和我这个问题并不是完全等同，我这里就是要通过标记为 less 的形式来引用一个远端的 css 文件 url, 这样 less 会自动获取远端内容并打包到项目里

正常情况下，less 内置的 url-file-manager 会去正确处理 web url，但是我发的报错截图里明显是在解析地址的时候出错了，变成了 ./http... 这样的形式

所以我猜测可能是 less loader 这里出了问题，正好我看到 umi 里面用了编译后的 less loader 代码，在我尝试替换了 less loader后我的问题得到了解决，所以我觉得可能是 umi 里使用的 less loader 有问题, 到目前为止我依然坚持觉得这不是一个使用错误的问题

[PeachScript]

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

[PeachScript]

看了下 [email protected] 已经有这个特性了，具体没生效的原因还需要再排查看看，refer: https://unpkg.com/browse/[email protected]/lib/less-node/url-file-manager.js

[PeachScript]

虽然 Less.js 3.x 在编译器层面是支持远程文件的，但 less-loader@6 才能使用引入远程 Less/CSS 编译的特性，Umi 内置 less-loader@5，故无法支持该用法，可参考 webpack-contrib/less-loader#333 及 less-loader#CHANGELOG

替换内置的 less-loader 是正解，issue 关闭