How to disable inline CSS in Gatsby?

[亡魂溺海] 提交于 2021-02-08 23:45:12

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!