如何将Stylus转换为Gatsby中的CSS文件？

Question

我希望生成常规的旧式CSS文件，而不是让我的CSS变成嵌入网站HTML的字符串，例如test()我想要bundle.js或其他东西那样的。

我不熟悉Webpack，但我认为如果我在bundle.css下放置一个.styl文件并在pages/上设置一个Stylus加载器，这将会神奇地发生，但它似乎没有发生。

Answer 1

您需要导入要添加到您网站的样式。

E.g。这里是默认的gatsby starter导入scss文件https://github.com/gatsbyjs/gatsby-starter-default/blob/24f3536420f8cab56dc27a5ce6a78ea894cadae1/pages/sass.js#L2

默认情况下，手写笔未设置为在Gatsby中工作。

要添加对它的支持，您需要修改Webpack配置以添加对Stylus Webpack加载程序的支持。 Gatsby自述文件中有关于如何执行此操作的说明：https://github.com/gatsbyjs/gatsby#how-to-use-your-own-webpack-loaders

除非您真的爱上了Stylus，否则使用其中一个内置样式预处理器可能会更容易，例如Sass / SCSS，Less或PostCSS。