8

默认情况下，GatsbyJS 正在推动使用 css 模块和自定义 css-in-js 库，如glamorous和印刷术

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

我目前的技巧是更新 GatsbyJShtml.js并添加一个

<link rel="stylesheet" type="text/css" href="/style.old.css" />

到标题。但是，我style.old.css生活在其中/public，但在运行构建时会被消灭。

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

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

4

1 回答 1

9

你很近！

与其放入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。

于 2017-10-28T01:21:09.303 回答