fix: swiper css scope (#836)

* fix: only load swiper css in carousel

* docs: update changelog

apps/web/components/ui/HeroCarousel/HeroCarousel.vue

@@ -25,13 +25,14 @@ import { HeroContentProps } from './types';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Navigation, Pagination } from 'swiper/modules';
 const { handleArrows, onSlideChange } = useCarousel();
-import '@/assets/libraries/swiper/swiper.min.css';
-import '@/assets/libraries/swiper/navigation.min.css';
-import '@/assets/libraries/swiper/pagination.min.css';
 
 const { heroItemProps } = defineProps<{
   heroItemProps: HeroContentProps[];
 }>();
 
 const enableModules = computed(() => heroItemProps.length > 1);
 </script>
+
+<style src="./styles/navigation.min.css"></style>
+<style src="./styles/pagination.min.css"></style>
+<style src="./styles/swiper.min.css"></style>

docs/changelog/changelog_en.md

@@ -61,6 +61,7 @@ Each client supports two PWA instances. With this change, you can designate the
 - The language selector is no longer displayed if only one language is configured.
 - Fixed an issue with category product prices not being updated on page change.
 - Added SSR rendering for homepage.
+- CSS for the Swiper library is now only loaded on pages that use the `HeroCarousel` component.
 - The `HeroCarousel` no longer overlaps the navigation menu on mobile devices.
 - Improved CLS for hero skeleton.