只为一个页面导入LESS文件

Question

只为一个页面导入LESS文件

5

我有一个主要的all.less文件，在其中包含了所有其他的less文件

例如：

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

我的问题是：

是否有可能只在主页中获取"homepage.less"（将其导入到all.less中）。

请注意，我不想直接将它附加到HTML文件中。

谢谢。

- FrontDev

你在生产环境中使用.less文件吗？这不是最好的想法 - 整个重点是在实时情况下将它们呈现为CSS，也就是事先。 - StudioTime

我在main.css中编译了所有的.less文件，这就是为什么我只想在一个HTML页面中附加homepage.less时出现问题，因为将其导入到all.less中会使其在所有页面中呈现，而不仅仅是在主页上。 - FrontDev

为什么您希望每个页面都有自己的CSS文件？这里的想法是让您网站的CSS在整个站点中被缓存，因此页面之间的加载时间很快。如果您想要将其分开到每个页面，则所有这些都表明您编写的CSS非常糟糕，并且您没有正确地重用任何样式。我建议您查看一下您的CSS，并问问自己为什么您的“homepage.less”文件包含如此多的唯一代码，而不是重用已经存在于网站上的内容。 - Sean Stopnik

如果你有特定的PSD文件，而客户希望你严格遵循该设计，那么你不能使用通用样式。在我的情况下，主页与其他页面完全不同。 - FrontDev

3个回答

1

如果你的主页是单独的HTML文件，那么你应该将单独的CSS文件包含进去。

我建议你重新考虑你的设计。因为看起来你的CSS代码并不是很可重用。这里有一本非常好的免费书籍，会教授你相关的概念。

- AskarovBeknar

我从客户那里得到了特定的设计，而在我的情况下，主页与其他页面完全不同。仅仅改变设计并不能解决问题，所以我想知道是否有可能。顺便说一句，谢谢你的回答。 - FrontDev

0

直接实现似乎不可能，因为所有的less最终都会在被提供给页面之前编译成css。也许你需要创建一个名为all_homepage.less的单独文件来实现这个目的？

- myTerminal

那么，我需要为每个页面创建单独的CSS文件，并将相应的LESS文件编译成相应的CSS文件，这是一个好主意吗？ - FrontDev

可能吧，这取决于你有多少页。 - myTerminal

1

有一个主要的大型CSS文件（缓存）在所有页面上，以及第二个较小的CSS文件，其中包含每个页面的代码，您将需要两个HTTP请求。当您将所有内容合并为同一文件时，您只需要一个HTTP请求，但必须加载更多字节。在大多数情况下，最后一个选项是最快的。只有当您有非常大量的“每页”代码时，加载更多字节会比额外的HTTP请求慢。 - Bass Jobsen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bass Jobsen · Accepted Answer

在您的主页上使用：

<body class="homepage">

然后在你的 Less 文件中：

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

以上代码仍将所有代码编译为单个文件。生成的CSS代码字节数较大，但您可以为所有页面缓存同一文件。