typescript - Svelte Swiper orsakar oväntad @ i /swiper/swiper.scss

Så, jag bygger en webbplats med Svelte och jag använder Swiper för en av funktionerna men jag får detta fel som säger [!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript). Detta säger alltså att jag inte kan använda @import-direktivet i SCSS vilket jag efter min forskning upptäckte att min Svelte-app inte stöder SCSS-filer. SCSS-preprocessorer krävs i rollup.config.js. Men plot twist, jag har SCSS-stöd och jag använder SCSS i mitt projekt istället för vanlig CSS. Här är min 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
    }
};

Nu är detta delen där jag importerar, detta är exakt koden i Swipers officiella dokumentation för 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>

Kan någon vänligen svara på denna fråga.

Svar #1

Hej, jag löste det själv men jag tänker dela det här här om någon annan behöver hjälp.

Så detta är en lösning på problemet, inte en idiotsäker metod för att aktivera scss. Även om scss redan finns i mitt projekt fungerar det inte endast i swiper. Så lösningen är att det finns min.css-filer i swiper-katalogerna. Till exempel: swiper/swiper.scss har ett alternativ swiper/swiper.bundle.min.css. Så du kan ändra allt på detta sätt:

// 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]);