javascript - 通过`import`引入的外部样式，如何指定其级联优先级？

Question

有如下一个样式表：

/*import.css*/
.box p {
    color: yellow;
  }

希望通过@import语法将其引入.style.css,并修改 import.css 的级联优先级：

@layer component-1,component,importLayer;

// @import './import.css';
@import url('./import.css') layer(importLayer);


@layer component {
  .box p {
    background-color: lightblue;
    font-size: 25px;
    color: red;
  }
}

@layer component-1 {
  .box p {
    color: blue;
  }
}

通过@layer component-1,component,importLayer;把importLayer的级联优先级设置为最高的，让p的文字为yellow，可是结果为red。

import 的外部样式如何指定级联优先级呢？

Answer 1

@import (./import.css) layer(importLayer);