私はリアクションベースのnextjsアプリを開発中です。いくつかのnpmパッケージは外部のcssインポートを使用しています。 nextjsアプリで外部CSSファイルをインポートするには
Module parse failed, you may need an appropriate loader to handle this file type.
がどのように私は私のnextjsアプリで外部のパッケージからCSSのインポートをサポートできるように私はエラーを取得しています。私はnext.config.jsで変更を加えることでどこかをチェックしました。しかし、私は適切なものを見つけることができません。誰かが私の周りでこれを助けることができれば素晴らしいでしょう。
外部のCSSファイルをコンポーネントにインポートします。たとえば、react-selectでは、スタイルを機能させるためにスタイルシートを追加する必要があります。あなたは、あなたがnextjsの頭の中でCSSファイルを追加することができますrender方法
render() {
return (
<div>
<style dangerouslySetInnerHTML={{ __html: rsStyles }} />
// rest of your component code
// where you can use the injected styles
</div>
);
}
でdangerouslySetInnerHTMLを使用して、コンポーネントに
import rsStyles from 'react-select/dist/react-select.css'
注入するスタイルを使用して自分のスタイルシートをインポートすることができます。
import Head from 'next/head'
レンダリングメソッドでは、return内に通常のHTMLと同様のheadタグを追加します.headタグはdiv内にある必要があります。
<div>
<Head>
<title>Test</title>
<link href="/static/master.css" rel="stylesheet" key="test"/>
</Head>
</div>
また、CSSは静的フォルダにある必要があります。複数のページでCSSを再利用するには、リンクタグにキーを追加します。キーがページ全体で同じ場合、次のサーバーはcssをリロードせず、代わりにcssファイルを再利用します。
この方法では、いずれのCSSパッケージも必要ありません。