ホームページ >ウェブフロントエンド >CSSチュートリアル >Next.js の「pages/_app.js」以外でグローバル CSS をインポートできないのはなぜですか?
「カスタム
Next.jsは、パフォーマンスとコード構造を重視した React アプリケーションを構築するための人気のあるフレームワークです。その機能の 1 つはグローバル CSS 機能で、アプリケーション全体でグローバルに使用できる CSS ファイルをインポートできます。ただし、この機能を使用すると、特定の制限や更新によりエラーが発生する可能性があります。
最近、ユーザーに「カスタム
エラーの理由
Next.js 9.2 では、グローバルなメソッドの変更が導入されました。 CSSが扱われます。以前は、ページ、コンポーネント、ユーティリティ ファイルなど、プロジェクト内の任意のファイルからグローバル CSS をインポートできました。ただし、Next.js 9.2 以降では、グローバル CSS はカスタム
問題の解決
エラーを解決するには、次の 3 つの簡単な手順に従う必要があります。
例
以下は、グローバル CSS を使用して更新された Pages/_app.js ファイルの例です。 import:
import '../global-styles/main.scss' export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> }
追加情報
特定のコンポーネントまたはページにのみスタイルを追加したい場合は、CSS モジュールの組み込みサポートを利用できます。 。たとえば、Button.js コンポーネントにスタイルを追加するには、button.module.scss という名前の Sass ファイルを作成し、コンポーネント内にインポートします。
上記の手順に従うことで、効果的に問題を解決できます。 「グローバル CSS はカスタム
以上がNext.js の「pages/_app.js」以外でグローバル CSS をインポートできないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。