Import css file as block level import using less

Question

Import css file as block level import using less

Is there a way to insert the .css file rules under the selector using @import

how you can when importing the .less file?

If you have a file, "x.less"

#x {
    color: #000;
}

and the file "main.less"

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

compiling the results of "main.less" into

.scope #x {
  color: #000;
}

However, if you have "Y.css"

#y {
    color: #111;
}

and change "main.less" to

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

compiling the results of "main.less" into

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

And if you have "Z.css"

#z {
    color: #222;
}

and change "main.less" to

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

compiling the results of "main.less" into

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

+3

less

bodhizero Apr 20 15 at 23:59

source to share

1 answer

seven-phases-max · Accepted Answer · 2015-04-21T00:11:04+0000

(inline)

simply injects the imported file "as is" without parsing it, so the result of that import inside the ruleset is undefined (invalid CSS, as in your example). To get what you need use (less)

for example:

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

Import css file as block level import using less

More articles: