webpack - 如何在 Gatsby 中将 Stylus 转换为 CSS 文件？

Question

我不想让我的 CSS 变成一个字符串以嵌入到网站的 HTML 中，而是想要生成一个常规的、老式的 CSS 文件，就像bundle.js我想要的bundle.css那样。

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

Answer 1

您需要导入样式才能将它们添加到您的站点。

例如，在默认 gatsby 启动器中导入 scss 文件https://github.com/gatsbyjs/gatsby-starter-default/blob/24f3536420f8cab56dc27a5ce6a78ea894cadae1/pages/sass.js#L2

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

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

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