问题
I created a website with gatsby-starter-ghost.
I noticed that by default the CSS is put into the head of every HTML file as an inline style:
<style>.every-thing-is-in-here {}</style>
I want to serve the CSS in its own file and not alongside every HTML file.
How can I disable this behaviour and use <link>
for CSS instead?
回答1:
It seems this is not configurable. I found a solution on Github. Basically in your gatsby-ssr.js
rewrite the style
elements like this:
export const onPreRenderHTML = ({getHeadComponents}) => {
if (process.env.NODE_ENV !== 'production')
return
getHeadComponents().forEach(el => {
// Remove inline css.
if (el.type === 'style') {
el.type = 'link'
el.props['href'] = el.props['data-href']
el.props['rel'] = 'stylesheet'
el.props['type'] = 'text/css'
delete el.props['data-href']
delete el.props['dangerouslySetInnerHTML']
}
})
}
来源:https://stackoverflow.com/questions/57188730/how-to-disable-inline-css-in-gatsby