Importing css via JS in Sage 10 with Bud

sage
, ,
1

Added Swiper to a project the other day:

  import Swiper, { Navigation, Pagination } from 'swiper';
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';

Bud (webpack) chokes on this:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Normally I’d pop into webpack.config.js and probably be able to fix this fairly quickly. With Bud I’m at a loss, whether I’m missing an appropriate extension or if I just need to modify the entry…

I solved this using a bandaid by grabbing the scss partials from Swipers repo, but I have a little more time today to poke around Buds documentation. Hoping someone might be able to point me in the right direction.

2

Search for “swiper bud” on here results in Import css module

1 Like
4

Well that just figures doesn’t it. I searched various versions of “import css in js” but never searched swiper itself.

Nevertheless, there’s no solution in that thread as to why CSS can’t be imported inside of JS or how to configure it so that it can be. I’ll keep digging around, thanks for the help tho!