Next.jsでSwiperを入れようとしたら「Global CSS cannot be imported from files other than your Custom」

タイトルのとおりです。

下記「Swiper React Components」を見ながら
https://swiperjs.com/react

npm i swiper

その後に

import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/swiper.scss';

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

こうするとできると……なるほど。

よし、

npm run dev

……

error - ./node_modules/swiper/swiper.scss
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages\_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global

Next.jsなんもわからん……

解決方法

https://swiperjs.com/react
こちらのStyles CSS Stylesを見て…

import 'swiper/swiper.scss';

の部分を

import "swiper/swiper-bundle.min.css";

に変更したらうまく行っちゃいました。

恥ずかしながら何故解決できたわからないのですが、
SCSSのコンパイラ的な問題なのでしょうか。ただ、SCSSのコンパイラライブラリ入れてもうまく行かず、謎は深まるばかりです…