Gatsby 中有没有办法将内联样式组件 CSS 导出到 CSS 文件中？

Question

我已经完成了我的第一个 Gatsby 应用程序，即将投入生产。这是 link：https://majiid-landing-page.vercel.app/

我在整个应用程序中使用了样式化组件，我通常采用 SCSS 和 BEM 方法，但我想尝试这种 CSS in JS 方法。

问题是页面首先出现几分之一秒没有样式，然后解析样式，就像注入 JS 一样，而样式实际上在 HTML 盖茨比使用 SSR.

这是正常行为吗？

我不确定如何重现整个东西，因为回购协议是私有的，反正我正在使用 GlobalStyles 以及每个组件中的特定样式。

以下是一些片段：

全局样式

import React from "react";

import Abstracts from "./abstracts/abstracts";
import Base from "./base/base";
import Utils from "./utils/utils";

const GlobalStyles = () => {
  return (
    <>
      <Abstracts />
      <Base />
      <Utils />
    </>
  );
};

export default GlobalStyles;

全局样式创建示例：

import { createGlobalStyle } from "styled-components";

export default createGlobalStyle`
  :root {
      // COLORS
    --body-background: #ffffff;
  }
`;

盖茨比 SSR

// gatsby-ssr.js
const React = require("react");
require("./src/scss/index.scss");
const GlobalStyles = require("./src/styles/global-styles").default;
const Layout = require("./src/layout/Layout").default;

exports.wrapRootElement = ({ element }) => {
  return (
    <>
      <GlobalStyles />
      <Layout>{element}</Layout>
    </>
  );
};

盖茨比-browser.js

const React = require("react");
require("./src/scss/index.scss");
const GlobalStyles = require("./src/styles/global-styles").default;
const Layout = require("./src/layout/Layout").default;

exports.wrapRootElement = ({ element }) => {
  console.log("Running this");
  return (
    <>
      <GlobalStyles />
      <Layout>{element}</Layout>
    </>
  );
};

Gatsby 配置（提取）：

plugins: [
    "gatsby-plugin-styled-components",
...

package.json 依赖关系

"dependencies": {
    "@vimeo/player": "^2.16.0",
    "babel-plugin-styled-components": "^1.13.2",
    "bootstrap": "^5.1.0",
    "gatsby": "^3.11.1",
    "gatsby-plugin-image": "^1.11.0",
    "gatsby-plugin-react-helmet": "^4.11.0",
    "gatsby-plugin-sass": "^4.11.0",
    "gatsby-plugin-sharp": "^3.11.0",
    "gatsby-plugin-sitemap": "^4.7.0",
    "gatsby-plugin-styled-components": "^4.11.0",
    "gatsby-plugin-webfonts": "^2.1.1",
    "gatsby-source-contentful": "^5.11.1",
    "gatsby-source-filesystem": "^3.11.0",
    "gatsby-transformer-sharp": "^3.11.0",
    "node-sass": "^6.0.1",
    "normalize.css": "^8.0.1",
    "polished": "^4.1.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.2.0",
    "react-responsive": "^9.0.0-beta.3",
    "styled-components": "^5.3.0"
  }

Answer 1

叫做FOUC (Flash Of Unstyled Content) 不，这不是“正常”行为，但使用样式组件很常见。

如果没有进一步的详细信息，就无法猜测可能会出现什么问题或配置错误，但通常可以通过以下方式修复：

安装所有必需的plugins:

npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components

在 gatsby-config.js 中添加正确的配置：

{
   resolve: `gatsby-plugin-styled-components`,
   options: {
      // Add any options here
   },
},

将 GlobalStyles 包装在 Layout 组件中。类似于：

import React from "react"
import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
   body {
     color: ${props => (props.theme === "purple" ? "purple" : "white")};
   }
`
export default function Layout({ children }) {
   return (
     <>
       <GlobalStyle theme="purple" />
       {children}
     </>
   )
}

https://www.gatsbyjs.com/docs/how-to/styling/styled-components/

中的其他实施细节

对于最后一点，您可以在 gatsby-ssr.js 和 gatsby-browser.js 中使用 wrapPageElement API（这两个文件都很重要） .

Answer 2

这是成功的： https://www.youtube.com/watch?v=G_dVwrhvkBI

基本上全局样式必须应用在 wrapPageElement 挂钩中而不是 wrapRootElement 挂钩中。

如果有人搜索 SO 来处理这个问题，我会把它留在这里。

Gatsby 中有没有办法将内联样式组件 CSS 导出到 CSS 文件中？

Is there a way in Gatsby to export inlined styled components CSS into a CSS file?

reactjs

server-side-rendering

gatsby

styled-components

css-in-js