如何做LESS @import没有@import字面上？ [英] How to do LESS @import without @import literally?

问题描述

我使用LESS。从Google PageSpeed我知道，在CSS文件中使用 @import 会妨碍网站速度。所以我想从我的CSS中排除任何 @import 的东西。我有2种不同的样式表 reset.css 和 rebuild.css - 避免 @import 我将他们的所有代码复制到我的主样式表。所以我的网站的真正的样式下面有许多代码，这是一个问题。所以我需要两个样式表到 styles.less （主样式表）文件，在某种程度上， @import 所以，当我用 WinLESS 将它们编译成纯 styles.css 时，它们实际上不会生成任何@import。我想把它们插入到style.css中，当我将 styles.less 编译成 styles.css 。

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.

我想要 styles.less like：

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

/* SITE STYLES HERE */

c $ c> styles.css 为：

But want the rendered styles.css to be:

code from reset.css
code from rebuild.css

/* THEN, SITE STYLES HERE */

我使用 WinLESS 从LESS编译CSS文件，而不是直接使用 .less ，而是使用 styles.css

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

推荐答案

最简单的方法：

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

/* SITE STYLES HERE */

这篇关于如何做LESS @import没有@import字面上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！