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

[Trailblazer780]

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?

[joshf]

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": [
    "@roots/bud-sass/stylelint-config",
    "@roots/sage/stylelint-config",
    "@roots/bud-tailwindcss/stylelint-config/scss"
  ]
}

• 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:

.purgecss({
  // ... config
  safelist: [
    ...require('purgecss-whitelister')([
      'node_modules/swiper/**/*.scss',
    ]),
  ],
})

[aitor]

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:

[joshf]

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