使用less导入css文件作为块级导入

Question

有没有办法在导入.less文件时使用@import将.css文件的规则嵌套在选择器下？

---

如果您有文件，＆＃34; x.less＆＃34;

#x {
    color: #000;
}

和文件＆＃34; main.less＆＃34;

.scope {
    @import "x.less";
}

编译＆＃34; main.less＆＃34;结果

.scope #x {
  color: #000;
}

---

然而，如果你有 ＆＃34; y.css＆＃34;

#y {
    color: #111;
}

并改变＆＃34; main.less＆＃34;到

.scope {
    @import "y.css";
}

编译＆＃34; main.less＆＃34;结果

.scope {
  @import "y.css";
}

---

如果你有 ＆＃34; z.css＆＃34;

#z {
    color: #222;
}

并改变＆＃34; main.less＆＃34;到

.scope {
    @import (inline) "z.css";
}

编译＆＃34; main.less＆＃34;结果

.scope {
  #z {
  color: #222;
}

Answer 1

(inline)只是解析导入的文件“as-is”而不解析它，因此在规则集中导入的结果是未定义的（在您的示例中无效的CSS）。 要获得所需内容，请使用(less)选项，例如：

.scope {
    @import (less) "z.css";
}