我有一个Next.js（13.3.0）项目。
我对包含动画的全局样式有问题。
以下是我的文件夹结构：

所以我通过master.scss文件加载所有的scss文件：

@import './all.css';
@import './animations.scss';
@import './big-flag.scss';
@import './coat.scss';
@import './flags16-both.scss';
@import './flags16-extra.scss';
@import './flags32-both.scss';
@import './flags32-extra.scss';
@import './locations.scss';
@import './index.scss';

在animations.scss文件中，我有以下内容：

@-webkit-keyframes shake {
    0% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    8% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg);
    }

    10% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    18% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    20% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    28% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    30% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    38% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    40% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    48% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    50% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    58% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    60% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    68% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    75% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes shake {
    0% {
        -webkit-transform: rotate(-12deg);
        -ms-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    8% {
        -webkit-transform: rotate(12deg);
        -ms-transform: rotate(12deg);
        transform: rotate(12deg);
    }

    10% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    18% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    20% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    28% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    30% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    38% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    40% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    48% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    50% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    58% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    60% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    68% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    75% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

在pages/_app.js文件中加载master.scss文件：

import { Provider } from 'react-redux';
import '../assert/css/master.scss';
import store from '../store/store';

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

现在，所有全局样式都按预期工作，但每当我想使用“摇动”动画时，它都不起作用。它没有抛出任何错误，但它就是不工作。
使其工作的唯一方法是在组件的特定scss文件中声明它。
有没有什么方法可以解决这个问题，而不必为每个组件重复代码？
谢谢