CODEWITHSUNDEEP
amp-html
Vrea
Vrea

Reputation: 79

How to include CSS file in AMP project

<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?

Upvotes: 3

Views: 14297

Answers (6)

Akshay Shah
Akshay Shah

Reputation: 3504

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>

Upvotes: 0

Sheo Sagar
Sheo Sagar

Reputation: 917

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

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

Upvotes: 7

Avat Rezaei
Avat Rezaei

Reputation: 153

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>

Upvotes: 1

lakki
lakki

Reputation: 56

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

Upvotes: 4

AbId KhAn
AbId KhAn

Reputation: 43

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.

Upvotes: 0

bFavreault
bFavreault

Reputation: 29

{% include "style.css" %} is a twig tag (template). Are you by chance in WordPress or other php base framework ?

You have two possibilities: 1. Using the include, you replace "style.css" with a reference to your css file to be include. 2. You paste your css inside the <style amp-custom>, in place of the template tag (e.g. the whole {% include "style.css" %}).

Hope this help

Upvotes: 1

Related Questions