在 <head> 中将全局样式表移动到样式组件上方答案

【问题标题】：Moving global style sheets above styled-components in <head>在 <head> 中将全局样式表移动到样式组件上方
【发布时间】：2019-08-26 04:37:13
【问题描述】：

我目前在我的一个组件中importing CSS 文件。这些样式表在<head> 中添加为link 标签，并将在全球范围内可用：

import './src/styles/normalize.module.css';

我也在使用 styled-components。

目前，由全局 CSS imports 生成的 link 标签位于 styled-component style 标签下方，位于 <head>：

我希望 styled-components 更具体地，即出现高于来自 CSS import 的 link 标签秒。

有没有办法做到这一点？

PS：我正在使用 GatsbyJS，但这可能与问题无关。

【问题讨论】：

"styled-components to be more specific" — 特定性由规则集上的选择器决定，而不是样式表在 DOM 中的位置。更具体的规则稍后出现在级联中。如果您希望样式化组件 CSS 稍后出现在级联中，那么您需要生成的样式元素出现在链接元素之后，而不是在它们之前。
@Quentin 是的。我希望将样式表注入/移动到由添加的
明确地说，Gatsby 的构建过程会自动按该顺序添加它。据我所知，我无法控制订单。所以我想知道是否有人知道如何改变它，例如通过一些样式化组件 API 或 gatsby-browser.js / gatsby-ssr.js API。可以手动将其添加到 html.js，但样式表必须是静态的，而不是带有散列文件名的动态。
我了解您在<head> 中的样式顺序存在问题。但如果只有normalize.css 有问题，你可以使用github.com/sergeysova/styled-normalize

标签： javascript css reactjs gatsby styled-components

【解决方案1】：

如果您有类似这样的布局，请尝试在 <App /> 中导入您的全局

<ThemeProvider theme={theme}>
   <App />
</ThemeProvider>

【讨论】：

【解决方案2】：

Gatsby 确实有一个地方可以控制头部组件中标签的顺序，它是onPreRenderHTML。

但是我稍微摆弄了一下它并没有帮助，因为在 gatsby 开发期间没有提取导入的 css，并且样式化的组件似乎没有在这个钩子中附加它的样式标签。

我仍然尝试了 2 件事，both described in this docs.

将全局css导入gatsby-browser.js。貌似那里的导入样式先被捡起来了
让 styled-components 通过 createGlobalStyle 处理全局样式（如果您使用 3rd 方 css，这并不总是可行的。）

【讨论】：

嗨，德里克，感谢您的意见。我注意到，当我创建一个新的 Gatsby 项目时，它只包含样式组件和在 gatsby-browser.js 中导入的全局 CSS，正如您所指出的，最初的顺序是正确的。然而，在添加了布局组件、MUI 主题和其他包之后，顺序发生了变化。突然间，链接到了最后。我不完全确定为什么会发生这种情况，我不确定我们是否可以信任自动订购？
createGlobalStyle 方法确实有效，但是必须将所有重置和规范化全局 CSS 放入 css`...` 标签有点不方便（我这样做了，然后将其导入 + 插入到 creatGlobalStyle） .
我应该再添加一件事。在 Gatsby 插件中，这种类型的注入发生在 onRenderBody。我玩弄了它并且能够以编程方式将link 元素注入head。但是，webpack 没有解析 link href 中的 url，所以在它全部构建之后它就不起作用了。我想在 head 中使用 style 元素可能会起作用，但是你又不得不在 css`...` 中编写全局 CSS 才能导出它。
@Magnus 如果你有多个包都将元素注入到头部标签中，那么探索onPreRenderHTML 并尝试在那里重新排序标签可能是值得的，尽管styled-components 注入时间是对我来说仍然是一个谜，如果你发现了什么，请分享。在onPreRenderHTML 之前肯定不会发生。另一件事是指定插件的顺序可能影响注入顺序。我现在没有要测试的设置，但是更改 gatsby-config.js 中的插件声明顺序并查看它的行为是否更一致可能是值得的
@Magnus 在 gatsby 构建期间，看起来样式组件标签始终放置在 css 导入之后。您发现构建和开发之间有什么不同的顺序吗？