問題タブ [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.
html - docusaurus: styles.module.css で ifm-color-primary を使用する方法
Docusaurus の足場は、custom.css
および の次の内容styles.module.css
:
.featuresAlt
以下のように定義したい。
そして、それを使用しindex.js
ます。何かのようなもの:
私の質問は次のとおりです。
異なるセクション (例:
features
とproducts
) を異なる背景色で分離しようとしています。独自のスタイルを定義する必要がありますか?上記の定義
featuresAlt
は、lightest
背景がないため正しくありません。どうすれば修正できますか?スタイルの色を で定義することをお勧めします
styles.module.css
か、それとも別の場所で定義する必要がありますか?
( Docusaurus のドキュメントのスタイリング ページを調べましたが、必要な情報が見つかりませんでした。)
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: