0

我有两个非常大的外部样式表，我想将它们拉入我的 WordPress 网站。我希望它们的样式仅应用于 ID 为“模式”的 div 中的内容 - 它们不应影响任何其他内容。

我尝试使用 PHP 和LESS来执行此操作，如下所示。

在我的文件的开头，我有：

<style media="screen" type="text/less">
            #pattern {
                    <?php echo file_get_contents('http://ace.staging.managebuilding.com/Manager/css/combinedSkin.css'); ?> 
                    <?php echo file_get_contents('http://ace.staging.managebuilding.com/Manager/css/combinedLess.css'); ?>
                    p {color:#F00;}
            }
</style>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/less.js"></script>

当我注释掉两个 file_get_contents 行时，LESS 成功处理了 "p {color:#F00;} 行并将其应用于#pattern div 内的内容。

但是，当我尝试引入这两个样式表时，在 less.js 中出现错误：less.js 失败

我不确定错误是什么，但我的猜测是 CSS 文件（http://ace.staging.managebuilding.com/Manager/css/combinedSkin.css，http://ace.staging.managebuilding.com /Manager/css/combinedLess.css）太大，LESS 无法处理。我还能如何实现这一目标？另外，请注意，这两个 CSS 文件会定期更新，我想提取最新的更改，所以我想链接到实时文件。

4

2 回答 2

1

我认为这与文件大小无关，而与文件类型有关。

可能，这就是你想要的

您正在引入似乎已经编译的 css（您的文件名以 结尾.css），而不是实际.less文件。我假设这些是来自 less 的预编译 css。如果是这种情况，那么您可能只需要更改style标签上的参数，因为您甚至没有真正导入更少。所以......type="text/less"在这里改变了：

<style media="screen" type="text/css">
   #pattern {
      <?php echo file_get_contents('http://ace.staging.managebuilding.com/Manager/css/combinedSkin.css'); ?> 
      <?php echo file_get_contents('http://ace.staging.managebuilding.com/Manager/css/combinedLess.css'); ?>
      p {color:#F00;}
   }
</style>

然而，这可能是你的愿望和真正的问题

如果此时您确实希望它们成为 LESS 代码（或者如果这两个文件确实包含 LESS 代码，因此是无效的 CSS），那么您需要导入.less文件，因此这两个文件需要该扩展名，就像这样：

<style media="screen" type="text/less">
   #pattern {
      <?php echo file_get_contents('http://ace.staging.managebuilding.com/Manager/css/combinedSkin.less'); ?> 
      <?php echo file_get_contents('http://ace.staging.managebuilding.com/Manager/css/combinedLess.less'); ?>
      p {color:#F00;}
   }
</style>

这是因为 LESS 实际上并不处理 css 文件。“如果你想导入一个 CSS 文件，并且不想让 LESS 处理它，只需使用 .css 扩展名。 ”

于 2013-06-08T19:20:03.917 回答
1

你应该包括这些： 

<style scoped >@import:url(style.css);</style>

在要应用它的容器内。
但是，不幸的是，它还不能很好地工作。它适用于大多数浏览器中的所有页面。从浏览器到浏览器进行测试的示例：http: //codepen.io/gcyrillus/pen/kGzLh

您将需要一个较重的选择器来将其严格应用到一个区域（例如，以 id 命名）。

你可以把这个文件分成更小的

于 2013-06-08T13:06:42.960 回答