تایپاسکریپت - Svelte Swiper باعث ظاهر شدن @ غیرمنتظره در /swiper/swiper.scss شده است

پس، من در حال ساخت یک سایت با استفاده از Svelte هستم و برای یکی از قابلیتها از Swiper استفاده میکنم، اما با این خطا مواجه میشوم که میگوید [!] Error: Unexpected character '@' (توجه داشته باشید که برای وارد کردن فایلهایی که جاوااسکریپت نیستند، به افزونه نیاز دارید). بنابراین این میگوید که نمیتوانم از دستور @import در SCSS استفاده کنم که بر اساس تحقیقاتم فهمیدم برنامه Svelte من از فایلهای SCSS پشتیبانی نمیکند. پردازندههای پیشپردازنده SCSS در rollup.config.js لازم هستند. اما نکته جالب این است که من پشتیبانی SCSS دارم و به جای CSS معمولی از SCSS در پروژهام استفاده میکنم. این هم rollup.config.js من است.

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';

const production = !process.env.ROLLUP_WATCH;

function serve() {
    let server;

    function toExit() {
        if (server) server.kill(0);
    }

    return {
        writeBundle() {
            if (server) return;
            server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                stdio: ['ignore', 'inherit', 'inherit'],
                shell: true
            });

            process.on('SIGTERM', toExit);
            process.on('exit', toExit);
        }
    };
}

export default {
    input: 'src/main.ts',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            preprocess: sveltePreprocess({ sourceMap: !production }),
            compilerOptions: {
                // enable run-time checks when not in production
                dev: !production
            }
        }),
        // we'll extract any component CSS out into
        // a separate file - better for performance
        css({ output: 'bundle.css' }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration -
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        typescript({
            sourceMap: !production,
            inlineSources: !production
        }),

        // In dev mode, call `npm run start` once
        // the bundle has been generated
        !production && serve(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('public'),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

حالا این بخشی است که من این را وارد میکنم، این دقیقاً همان کد در مستندات رسمی Swiper برای Svelte است (https://swiperjs.com/svelte):

<script>
    // import Swiper core and required modules
    import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
    import { Swiper, SwiperSlide } from 'swiper/svelte';
    // Import Swiper styles
    import 'swiper/swiper.scss';
    import 'swiper/components/navigation/navigation.scss';
    import 'swiper/components/pagination/pagination.scss';
    import 'swiper/components/scrollbar/scrollbar.scss';
    // install Swiper modules
    SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
</script>

لطفاً کسی به این سوال جواب بدهد.

پاسخ شماره ۱

هی خودم حلش کردم اما میخواهم اینجا به اشتراک بگذارم اگر کسی دیگر نیاز به کمک داشت.

پس این یک راهحل موقت است نه یک راهحل کامل و تضمینی برای فعال کردن SCSS. حتی با اینکه SCSS قبلاً در پروژه من وجود دارد، اما فقط در Swiper کار نمیکند. بنابراین راهحل موقت این است که فایلهای min.css در دایرکتوریهای Swiper وجود دارند. برای مثال: swiper/swiper.scss یک نسخه جایگزین swiper/swiper.bundle.min.css دارد. بنابراین میتوانید همه چیز را به این صورت تغییر دهید:

// import Swiper core and required modules
    import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
    import { Swiper, SwiperSlide } from 'swiper/svelte';
    // Import Swiper styles
    import 'swiper/swiper-bundle.min.css';
    import 'swiper/components/navigation/navigation.min.css';
    import 'swiper/components/pagination/pagination.min.css';
    import 'swiper/components/scrollbar/scrollbar.min.css';
    // install Swiper modules
    SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);