引用导入的LESS样式但不输出它们

Question

如何引用导入的LESS样式但不输出？我确信reference应该做到这一点，但它似乎没有按预期工作。

正如this Codepen所示，

.modal-content-custom {
  @import (less, reference) "https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css";
  .modal-content;
}

编译到

.modal-content-custom {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}
.modal-content-custom html {
...

所以它只是忽略了reference。

Answer 1

解决。对于命名空间导入，将忽略reference导入选项。这将按预期工作。

@import (less, reference) "https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css";

.modal-content-custom {
  .modal-content;
}