Question

我正在使用LESS。来自Google PageSpeed我了解到，在CSS文件中使用@import会妨碍网站速度。所以我想从CSS中排除任何@import内容。我有两个不同的样式表reset.css和rebuild.css - 为了避免@import我将所有代码复制到我的主样式表中。所以我的网站的真实风格得到了很多代码，这是一个问题。因此，在某种程度上，我需要将@import两个样式表放入styles.less（主样式表）文件中，这样，当我用 WinLESS 为纯styles.css。当我将styles.less编译成styles.css时，我希望它们物理插入到style.css中。

我希望styles.less喜欢：

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

/* SITE STYLES HERE */

但希望渲染的styles.css为：

code from reset.css
code from rebuild.css

/* THEN, SITE STYLES HERE */

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

Answer 1

最简单的方法：

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

/* SITE STYLES HERE */

Answer 2

您可以在less文件中使用import语句。它将被包含在内（css代码被插入）在你的结果css文件中。

详细了解winless example page（点击Importing）

实施例： styles.less：

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

other.less：

.myClass {
    // rules
}

使用winless（或任何其他较少的编译器）编译后; result.css：

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

如何在不使用@import的情况下轻松实现@import？

2 个答案: