Swiper: Import Modular SCSS and $themeColor variable

[proov]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 5.2.0
• Platform/Target and Browser Versions: macOS 10.15.1
• Live Link or JSFiddle/Codepen or website with isssue: https://codesandbox.io/embed/great-heisenberg-f7uyy

What you did

Importing all SCSS node_modules/swiper/components components to load only what i want. See _swiper.scss : https://codesandbox.io/embed/great-heisenberg-f7uyy

Also, i wrote (& commented) a dirty fix, i would avoid using it :D

Expected Behavior

Navigation arrows should get the $themeColor color.

Actual Behavior

Navigation arrows stays black.

Thanks 🙌

[joebentaylor1995]

This seems more of a styling issue with your code, rather than a swiper problem?

[joebentaylor1995]

Ive fixed your code here @proov

it seems you werent targetting the arrows for any styles

add this to your swiper.scss file

.swiper-button-prev,
.swiper-button-next {
  &:after {
    color: $themeColor;
  }
}

[cfxd]

@proov I'm with you. I feel like the line in components/core/core.scss should be interpolated:

--swiper-theme-color: #{$themeColor};

If I make that change in my src (or use your "dirty" fix) then it works exactly as expected.

[proov]

@proov I'm with you. I feel like the line in components/core/core.scss should be interpolated:

--swiper-theme-color: #{$themeColor};

If I make that change in my src (or use your "dirty" fix) then it works exactly as expected.

Yeah that's what i think too 😅

[nolimits4web]

Fixed by #3334