How to do LESS @import without @import literally?

问题

I'm using LESS. From Google PageSpeed I've learnt that, using @import in CSS file will hamper the site speed. So I'd like to exclude any @import thing from my CSS. I have 2 different stylesheets reset.css, and rebuild.css - to avoid @import I copied all of their code into my main stylesheet. So the real styles of my site got below many code and that's a problem. So I need the two stylesheets to @import into the styles.less (main stylesheet) file, in a way, so that, they actually won't generate any @import when I'm compiling them with WinLESS into pure styles.css. I want them to insert physically into the style.css when I'll compile the styles.less into styles.css.

I want styles.less like:

@import('reset.css');
@import('rebuild.css');

/* SITE STYLES HERE */

But want the rendered styles.css to be:

code from reset.css
code from rebuild.css

/* THEN, SITE STYLES HERE */

I'm using WinLESS to compile the CSS file from LESS, and NOT USING .less with JavaScript directly, but using the styles.css only.

回答1:

The simplest way:

@import (less) 'reset.css';
@import (less) 'rebuild.css';

/* SITE STYLES HERE */

回答2:

You can just use an import statement in your less file. it will be included (css code is inserted) in your result css file.

read more on winless example page (click on Importing)

Example: styles.less:

@import('other.less');
.myOtherClass {
    // other rules
}

other.less:

.myClass {
    // rules
}

after compiling using winless (or any other less compiler); result.css:

.myClass {
    // rules
}
.myOtherClass {
    // other rules
}

来源：https://stackoverflow.com/questions/20281919/how-to-do-less-import-without-import-literally

标签

css

less