Replies: 1 comment 1 reply
-
|
Hi! It's working in intended when it's adding the style to the head. You can use |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Thanks , i wasnt shure if was normal because with gatsby-image didnt happen this. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
I noticed that default styles of gatsby-plugin-image are been loading at like <style>, is that normal?
<style>.gatsby-image-wrapper{position:relative;overflow:hidden}.gatsby-image-wrapper img{bottom:0;height:100%;left:0;margin:0;max-width:none;padding:0;position:absolute;right:0;top:0;width:100%;object-fit:cover}.gatsby-image-wrapper [data-main-image]{opacity:0;transform:translateZ(0);transition:opacity .25s linear;will-change:opacity}.gatsby-image-wrapper-constrained{display:inline-block;vertical-align:top}</style>The problem is that differs the order when you are in Develop or in Production mode.
On Develop my own styles are down and the plugin styles are up, so if for example i put one className with position : absolute this one will step the position: relative of gatsby-image-wrapper.
But on Production the css file from the bundle its at the top of the head, and <style> of the plugin its at the bottom. This cause that what you see on :8000 its not the same on :9000.
Im using miniCssExtract so in Production i allways have the css file at the top of .
This i can fix it by putting inline style, or saying in className that is !importan on scss.
Is there any way to avoid that <style> element on the html?
Why is the only plugin that generates that <style> element on the html?
Does gatsby have one way that i can say put the css file at the bottom of ?
Im using:
Beta Was this translation helpful? Give feedback.
All reactions