Export swiper-vars.scss for overwriteability

[entoncode]

Clear and concise description of the problem

Currently, the src/swiper.scss file features following line of code:

@use 'swiper-vars.scss' as vars;

This is so the variables inside src/swiper-vars.scss (which is only $themeColor at the time of writing) is included into the namespace of vars.
This included variable is used once in src/core/core.scss via vars.$themeColor.

However, as a developer using swiper, this now complicates overwriting said variable in my own code.
There is no way of overwriting $themeColor for example by:

@use "~swiper/scss" with (
    $themeColor: /* some value */,
);

because the variable cannot be overwritten through two levels of @use.
This will generally hold true for any variable that might be added to the file in the future.

Suggested solution

In the src/copy/package.json we could export the src/swiper-vars.scss file to ./scss/vars, for example:

{
  /* ... */
  "exports": {
    /* ... */
    "./scss/thumbs": "./modules/thumbs.scss",
+   "./scss/vars": "./swiper-vars.scss",
    "./scss/virtual": "./modules/virtual.scss",
    /* ... */
  },
}

This would allow for following code to work:

@use "~swiper/scss/vars" with (
    $themeColor: /* some value */,
);
@use "~swiper/scss";

Alternative

There is an alternative to use @import instead of @use as was the case in older versions of Swiper, but this is not recommended since the use of the old @import is meant to be replaced by @use (see also https://sass-lang.com/documentation/at-rules/use/#differences-from-import).

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR