如何在 AMP 项目中包含 CSS 文件

Question

<style amp-custom>
{% include "style.css" %}
</style>

我正在尝试创建一个简单的 AMP 站点，但遇到了一些问题。什么是 {％％}？它对我不起作用？

Answer 1

{% include "style.css" %} 是一个树枝标签（模板）。您是否偶然使用了 WordPress 或其他 php 基础框架？

你有两种可能： 1. 使用包含，将 "style.css" 替换为对要包含的 css 文件的引用。 2. 将 css 粘贴到 <style amp-custom> 中，代替模板标签（例如整个 {% include "style.css" %}）。

希望对您有所帮助

Answer 2

您可以导入文件，因为样式表继承自 css 文件。 @import "file/path/the/css/or/scss/file" 在 <style amp-custom> 标签之间。完整代码如下。

<style amp-custom> @import "file/path/the/css/or/scss/file"; </style>

here为参考。

Answer 3

您不能引用外部样式表 amp 页面，样式必须内联在具有 amp-custom 属性

的样式标签下

<style amp-custom>

</style>

Answer 4

尝试以下 - 在 php 脚本

执行期间包含指定的 css 文件

<style amp-custom>
    <?php include_once 'assets/css/all.css'; ?>
 </style>

Answer 5

你可以试试，对我有用...

<style amp-custom>
     @import url('css/custom.css');
</style>

Answer 6

如果你的技术是 PHP 那么你可以使用下面的语法并且它是有效的。

<style amp-custom>
 <?Php 
  $css  = file_get_contents('/amp/assets/css/header.css'); 
  echo $css; 
 ?>
</style>

How to include CSS file in AMP project