Cannot make Swiper styling work with both JS import and dart sass CLI

[kkesidis]

Hello, we have an issue with how the styling for SwiperJS loads in different scenarios. To explain the issue, i first need to provide a description of our structure.

We have a monorepo with 3 packages

• library: A set of components created using VueJS, some of them using Swiper. The components only include the logic and templating. Styling is the responsibility of the next package.
• style: This package contains our SCSS styling, including importing the Swiper styling. The styles are built using the dart sass cli.
• examples: This is internal and used to test our components and their styling locally, create pages, e.t.c.

When running a combination of our components using the examples, styling is imported from a node file

// main.ts
import '<package-name>/src/index.scss';

In this case, since the styling seems to pass through node, we need to use the paths as those are defined in the "exports" entry of the package.json.

@use 'swiper/scss';
@use 'swiper/scss/pagination';
@use 'swiper/scss/a11y';

The problem is, though, on our build step. For the styling, we use sass to build it. Since it does not pass through node or package.json, it needs the direct path to the stylesheets it should import.

@use 'swiper/swiper';
@use 'swiper/modules/pagination';
@use 'swiper/modules/a11y';

With the above imports (@use), sass command runs fine, but we cannot serve our examples through node, due to an error:

Error: Missing "./swiper" specifier in "swiper" package

In general, we need to have both approaches. Serving via node to test that everything works and building via sass to produce our code. Unfortunately, due to this we can only do one or the other.

Are there any ideas on how to make this work?

[nachtfunke]

Did you ever find an answer to this?

[kkesidis]

Sorry for the late reply. Unfortunately I was not able to implement a proper solution yet.

It looks like SASS introduced a nice new functionality that should support such implementations using a pkg importer, but I did not test it yet since the framework I'm using does not support it properly yet.