CODEWITHSUNDEEP
cssless
Estus Flask
Estus Flask

Reputation: 222493

Reference imported LESS styles but not output them

How can imported LESS styles be referenced but not outputted? I was sure that reference should do the trick but it doesn't seem to work as intended.

As this Codepen shows, 

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

compiles to

.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 {
...

So it just ignores reference.

Upvotes: 1

Views: 25

Answers (1)

Estus Flask
Estus Flask

Reputation: 222493

Solved. reference import option is ignored for namespaced imports. This will work as expected.

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

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

Upvotes: 1

Related Questions