agragregra / OptimizedHTML-5

OptimizedHTML 5 – Lightweight production-ready Gulp starter.

Home Page:https://webdesign-master.ru/blog/tools/optimizedhtml-5.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

swiper is not working.

keremzor opened this issue · comments

hi, i want to use swiper. But I'm having a problem with the css loading. I will be glad if you help.

import code (app.js)
`import Swiper from 'swiper';
import 'swiper/css';

document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
})`

Error message
ERROR in ./node_modules/swiper/swiper.min.css 13:0 Module parse failed: Unexpected character '@' (13:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

webpack 5.51.1 compiled with 1 error [16:12:14] The following tasks did not complete: default, scripts [16:12:14] Did you forget to signal async completion?

Thanks.

It's Gulp starter. Not webpack environment.
Load Swiper styles bundle in _config.* style-file (Sass example):
@import "node_modules/swiper/swiper-bundle"