I am currently working on a Next.js (13.3.0) project and facing an issue with global styles that include animations. Here is the structure of my folders: https://i.stack.imgur.com/nM5xw.png
All SCSS files are loaded through the master.scss file:
@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';
The animations.scss file contains keyframes for the "shake" animation.
[Keyframes code here...]The master.scss file is imported in the pages/_app.js file where all global styling works as expected except for the "shake" animation. It only works when declared in a specific component's SCSS file. Is there a way to resolve this without duplicating the code in each component? Thank you.