webpack - Stylus を Gatsby の CSS ファイルにトランスパイルする方法は?

Question

CSS を文字列にしてサイトの HTML に埋め込むのではなく、通常の昔ながらの CSS ファイルを生成する必要がありbundle.jsますbundle.css。

私は Webpack に詳しくありませんが、.stylファイルを置いpages/て Stylus ローダーをセットアップすると、gatsby-node.jsこれが魔法のように起こると思っていましたが、そうではないようです。

Answer 1

スタイルをサイトに追加するには、スタイルをインポートする必要があります。

たとえば、デフォルトの gatsby スターターで scss ファイルをインポートしています

Stylus は、デフォルトでは Gatsby で動作するように設定されていません。

サポートを追加するには、Webpack 構成を変更して、Stylus Webpack ローダーのサポートを追加する必要があります。これを行う方法については、Gatsby README に説明があります: https://github.com/gatsbyjs/gatsby#how-to-use-your-own-webpack-loaders

ただし、Stylus を本当に気に入っている場合を除き、Sass/SCSS、Less、または PostCSS などの組み込みのスタイリング プリプロセッサのいずれかを使用する方が簡単かもしれません。