How to include CSS file in AMP project

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

I am trying to create a simple AMP-site and got some problem. What is {% %}? It doesn't work for me?

6 Answers

You can try it, it's working for me...

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

You can’t reference external stylesheets amp pages, styles must be inlined under style tag with amp-custom attribute

<style amp-custom>

</style>

reference: amp styling doc

Try the following - include the specified css file during the execution of the php script

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

you can import the file as the stylesheet inherits from the css file. @import "file/path/the/css/or/scss/file" between the <style amp-custom> tag. the full code is below.

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

here is the reference.

If your technology is PHP then you can use the below syntax and it is working.

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