How do I add a SASS compilor to Sage 10.x to use Swiper JS

Hi, I am trying to use a library called Swiper JS and it uses SCSS. When I try to use it, sage errors out when compiling saying I need a loader for the SCSS files. Does anyone know how to get this to work?

1 Like

I’m using Swiper in exactly that scenario. You’ll need to do a couple of things:

  • Require @roots/bud-sass and (obviously) swiper in package.json.
  • In .stylelintrc, extend the rules to include @roots/bud-sass, @roots/sage and @roots/bud-tailwind (if you use it). This defines which order the rules are extended, which is important as they’ll override each other:
  "extends": [
  • Somewhere in your sass, you’ll want to include Swiper’s base styles:
@import '~swiper/scss'; // Base styles
@import '~swiper/scss/autoplay'; // Additional modules if needed
@import '~swiper/scss/effect-fade';
  • Somewhere in your js, load up Swiper:
import Swiper, {Autoplay, EffectFade} from 'swiper';

new Swiper('.swiper', {
  // configure Swiper to use modules
  modules: [Autoplay, EffectFade],
  // more config ...
  • If you use @roots/bud-purgecss, then you’ll want to also safelist Swiper’s styles. Easiest way to do this is to add purgecss-whitelister to package.json. Then add the following to bud.config.js:
  // ... config
  safelist: [

Hi, @joshf Thank you for this explanation. After

yarn add swiper

there is no swiper/scss folder in node_modules.

How do you add the library?

These files seems to be inside each module folder:

@import '~swiper/modules/navigation/navigation';

But I can’t import it:

A little tricky, but the SCSS is available via module exports, so you’d want to use the paths I referenced above even though they don’t technically live there.

Here’s the full list of styles available: Swiper API