webpack - 如何在 GatsbyJS 中使用全局 CSS 样式表

Question

默认情况下，GatsbyJS 正在插入使用 css 模块和自定义 css-in-js 库，如 glamorous和 typography

不幸的是，我正在将现有站点移植到使用传统全局样式表的 GatsbyJS。将所有现有的 HTML-CSS 工具转换为 CSS 模块的工作是一件苦差事。

我目前的技巧是更新 GatsbyJS html.js并添加一个
<link rel="stylesheet" type="text/css" href="/style.old.css" />
到标题。我有 style.old.css住在/public但是，当构建运行时，这会被清除。

我希望有一个插件来支持这一点，但 Gatsby 团队似乎不鼓励使用全局 CSS，这对于新项目是可以理解的。

我试图编写一个插件来添加它，但发现有关如何编写“样式插件”的资源有限。

Answer 1

你很近!

而不是放置 style.old.css在 /public , 放在 /layouts .然后，只需将其导入 /layouts/index.js像这样:
import './style.old.css'
当你开始一个新的 gatsby 项目( gatsby new project-name )时，你会注意到一个 index.css /layouts 中的文件文件夹，导入到layouts/index.js默认情况下。只需按照此示例添加您自己的全局样式表。

一般来说，您不应该在 /public 中放置任何内容。直接地。如果您希望静态文件以 /public 结尾文件夹，创建一个/static文件夹并将它们放在那里(Gatsby 会为您将 /static 中的所有文件复制到 /public)。