less use @import url() When this style file also imported by other files, an error will be reported

[clt111]

Describe the bug

// index.tsx
import './index.less' export const Test = () => { const text = '测试测试' return ( <> <div className="content">{text}</div> <div className="abc">{text}</div> </> ) }

// index.less
@import '../../../first/index.less'; .content { width: 100px; height: 100px; background-color: yellow; }

// first/index.less
@import './test.less'; // when i use this, it will be OK
@import url('./test.less'); // when i use @import url() , it will report error

error message like this:
[plugin:vite:css] [less] '../../../first/test.less' wasn't found. Tried - /home/projects/first/test.less,../../first/test.less,../../../first/test.less

Reproduction

https://stackblitz.com/edit/vitejs-vite-sawjss?file=src/second/many/other/index.less

Steps to reproduce

No response

System Info

"vite": "^4.3.2"

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-sawjss (Open reproduction)

[bluwy]

Maybe related #8400