只为一页导入 LESS 文件答案

【问题标题】：Import LESS file only for one page只为一页导入 LESS 文件
【发布时间】：2015-05-25 04:04:34
【问题描述】：

我有主要的all.less 文件，其中包含所有其他较少的文件

例如

@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "homepage.less";

所以我的问题是。

是否只能在首页获取"homepage.less"（导入all.less）。

请注意，我不想直接在 html 文件中附加它。

谢谢

【问题讨论】：

您在生产中使用.less 文件？这不是最好的主意 - 重点是在实时情况下将它们渲染为 css，这意味着事先
不，我在 main.css 中编译 all.less 文件，这就是为什么我只在一个 html 页面中附加 homepage.less 时遇到问题，因为在 all.less 中导入它会使其在所有页面中呈现，不只是在首页
为什么要每个页面都有自己的css文件？这里的想法是为整个站点缓存您站点的 css，因此页面之间的加载时间很快。如果您想将每页分开，那么说明您的 css 编写得很糟糕，并且您没有正确地重用您的任何样式。我建议你看看你的 css 并问问自己为什么你的“homepage.less”文件包含这么多独特的代码，而不是重复使用网站上已有的内容。
如果您有特定的 PSD 文件并且您的客户希望您强烈遵循该设计，则不能使用通用样式。就我而言，主页与其他页面完全不同。

标签： css less

【解决方案1】：

在您的主页上使用：

<body class="homepage">

然后在您的 Less 文件中：

.homepage {
  @import "homepage.less";
}

以上仍然将您的所有代码编译到一个文件中。您编译的 CSS 代码将有更多的字节数，但您可以为所有页面缓存相同的文件。

【讨论】：

【解决方案2】：

如果您的主页是单独的 html 文件，那么您应该在其中包含单独的 css 文件。

我建议您重新考虑您的设计。因为看起来你的css代码不是那么可重用的。 Here 是一本非常好的免费书籍，可以教你概念。

【讨论】：

【解决方案3】：

这似乎不可能直接因为所有less 最终将被编译为css，然后再分配给一个页面。可能您需要为此创建一个名为 all_homepage.less 的单独文件？

【讨论】：

hmmm，这样的话我要为每个页面创建单独的css文件，我想附加一个单独的less文件，并在相应的css中编译相应的less文件，这是一个好主意吗？跨度>
可能会，这取决于您拥有的页数。
在所有页面上都有一个主要的大型 CSS 文件（缓存）和一个带有每个页面代码的较小 CSS 文件，您将需要两个 http 请求。当你合并所有是同一个文件时，你只需要一个 http 请求，但必须加载更多的字节数。在大多数情况下，最后一个选项是最快的。只有当你有非常大量的per page 代码时，加载更大的字节数才会比额外的http请求慢。