アジェンダ
React/Next.jsプロジェクトにCSSモジュールとしてインストール・インポートする方法について簡単にまとめます。
手順
ステップ 1: destyle.css のインストール
まず、npm または yarn を使用して destyle.css パッケージをインストールします。プロジェクトのルートディレクトリでターミナルを開き、次のコマンドを実行してください。
npm install destyle.css
または
yarn add destyle.css
これにより、destyle.css がプロジェクトに追加されます。
ステップ 2: グローバルスタイルとして destyle.css をインポートする
次に、destyle.css をグローバルスタイルとしてインポートします。これを行うために、Next.js プロジェクトのエントリーポイントである _app.js または _app.tsx ファイルを編集します。
まず、pages/_app.js または pages/_app.tsx ファイルを開きます。そして、以下のように destyle.css をインポートします。
pages/_app.js または pages/_app.tsx
import 'destyle.css';
import '../styles/globals.css'; // 他のグローバルスタイルがある場合
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
これで、destyle.css がプロジェクト全体に適用され、すべてのデフォルトブラウザスタイルがリセットされます。