How to include CSS file in AMP project

Question

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

Solution 1

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

Solution 2

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

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

Solution 3

{% 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