アニメーションを効かせたい

next.js を使って開発をしています。
keyframesを使ってアニメーションを効かせたいのですが調べてみたところnext.jsではstaticというフォルダを作り、その中にcssファイルを作るらしく、プロジェクト内にsrc/static/animation.scssというファイルを作りコードを記述しました。
_document.tsxのなかに以下のように記述しましたがscssがうまく読み込まれず適応されません。
わかる人いましたらご教授お願いしたいです

追記
適応させたいアニメーションはこれです
https://www.youtube.com/watch?v=zoe8WlCV_UE

import NextDocument, { Head, Main, NextScript } from 'next/document';

class Document extends NextDocument {
  render() {
    return (
      <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <link rel="stylesheet" type="text/scss" href="static/animation.scss" />
        <body>
          <Main />
          <NextScript />
        </body>
      </Head>
    );
  }
}

export default Document;

行動規範の内容に同意します

回答2件

ベストアンサー

keyframesは試してませんが、自分の場合、SCSS自体は以下の環境で動いてます。

sassパッケージのインストール

bash
1npm install sass

next.config.jsでstylesフォルダに設置したscssファイルが認識されるように設定

javascript
1const path = require('path');
2
3const config = {
4  sassOptions: {
5    includePaths: [path.join(__dirname, 'styles')],
6  },
7};
8
9module.exports = config;

styles/global.scss作成

sass
1h2 {
2  color: red;
3}
4

pages/_app.tsxで読み込み

typescript
1import { AppProps } from 'next/app';
2import '../styles/global.scss';
3
4function MyApp({ Component, pageProps }: AppProps) {
5  return <Component {...pageProps} />;
6}
7
8export default MyApp;

投稿2020/09/10 15:22

nskhei

総合スコア704

退会済みユーザー

2020/09/10 15:43

解決できました！！ありがとうございます！！ scssフォルダはpublicのなかに入れるのが一般的なのでしょうか？

nskhei

2020/09/10 15:48

publicには入れない方が良いと思います。自分はプロジェクトルートにstylesというフォルダを作って入れました。

退会済みユーザー

2020/09/10 16:09

ありがとうございます！！参考にします！

行動規範の内容に同意します

_document.tsxのなかに以下のように記述しました

オーソドックスなNextのディレクトリ構成を取っているのなら_documentではなく_appが正解かと思います。
書き方もimportを使うだけで良いはずです(以下参考)。

Next.jsとCSS

投稿2020/09/10 14:51

nekoniki

総合スコア2411

退会済みユーザー

2020/09/10 15:04 編集

ありがとうございます！！パスをpublic/style/animation.scssに変更し _app.tsxにimport '../style/animation.scss'としましたがModule not found: Can't resolve 'style/animation.scss'となってしまいます

行動規範の内容に同意します

あなたの回答