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

**URL:** https://discourse.roots.io/t/how-do-i-add-a-sass-compilor-to-sage-10-x-to-use-swiper-js/23062
**Category:** sage
**Tags:** webpack, sage10
**Created:** 2022-05-06T12:33:19Z
**Posts:** 4

## Post 1 by @Trailblazer780 — 2022-05-06T12:33:19Z

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?

---

## Post 2 by @joshf — 2022-05-06T14:04:35Z

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',
    ]),
  ],
})
```

---

## Post 3 by @aitor — 2022-05-17T14:58:39Z

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?

 ![Captura de pantalla 2022-05-17 a las 16.54.38](https://discourse.roots.io/uploads/default/original/2X/d/dfd41339e48bd699ae159b315ea90629b753ebd0.png)

These files seems to be inside each module folder:

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

But I can’t import it:

 ![Captura de pantalla 2022-05-17 a las 17.09.32](https://discourse.roots.io/uploads/default/original/2X/f/fdebdaa66717187e0ef89d804cd8bedcf88bec50.png)

---

## Post 4 by @joshf — 2022-05-17T15:36:51Z

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](https://swiperjs.com/swiper-api#scss-styles)