問題タブ [docusaurus]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
553 参照

html - docusaurus: styles.module.css で ifm-color-primary を使用する方法

Docusaurus の足場は、custom.css

および の次の内容styles.module.css:

.featuresAlt以下のように定義したい。

そして、それを使用しindex.jsます。何かのようなもの:

私の質問は次のとおりです。

  • 異なるセクション (例:featuresproducts) を異なる背景色で分離しようとしています。独自のスタイルを定義する必要がありますか?

  • 上記の定義featuresAltは、lightest背景がないため正しくありません。どうすれば修正できますか?

  • スタイルの色を で定義することをお勧めしますstyles.module.cssか、それとも別の場所で定義する必要がありますか?

( Docusaurus のドキュメントのスタイリング ページを調べましたが、必要な情報が見つかりませんでした。)

0 投票する
0 に答える
253 参照

css - Docusaurus をローカルの CSS ファイルで動作させるには?

Docusaurus2 ページにコード スニペットを埋め込むための React コンポーネントを構築しています。このコンポーネントは、 Prism CSSの修正版であるローカル CSS ファイルを使用して、コード スニペットの構文を強調表示します。このコンポーネントは、NPM パッケージとして公開されます。

パッケージを Docusaurus2 プロジェクトにインポートすると、サーバー ビルドで次のエラーが発生します。ReferenceError: document is not defined

調査の結果、Docsaurus はローカル CSS ファイルまたはローカル CSS ファイルで動作していないようです。

を使用してローカル CSS ファイルをインポートする代わりに、Prism CSSをコンポーネントに直接インポートすると、ビルドの問題は発生しません。import "prismjs/themes/prism.css";import "./prism.css"

私たちが試したこと:

  • MiniCssExtractPluginを使用してみましたが、コード スニペットで強調表示されなくなりました。
  • 一時的な解決策は、css ファイルのみを含む npm パッケージを作成し、それを React コンポーネントにインポートすることです。これにより、プロジェクトでビルド エラーが発生しなくなりました。

コンポーネント内のファイルの例を次に示します。

webpack.config.js:

editor.tsx (prism.css は上記の css ファイルです):

パッケージ.json:

.babelrc: