3 votes

Fiche d'importation dans un seul composant svelte

J'utilise un plugin leaflets à composant unique, pour le moment je mets les js et css dans public/index.html mais je dois trouver un moyen d'importer seulement les js et css dans le composant unique. J'ai aussi essayé avec svelte::head mais ça n'a pas marché. En outre, ce projet va être utilisé comme un node_modules, donc je dois trouver un moyen de ne pas mettre les fichiers js et css dans le dossier public. Des suggestions ? J'ai essayé d'importer leaflet en installant leaflet avec npm et en important comme suit

import from 'leaflet' 
import * as L from 'leaflet'

mais ça n'a pas marché.

3voto

digby280 Points 666

Vous pouvez importer les styles en utilisant rollup-plugin-css-only. Pour éviter la vilaine importation css avec un chemin relatif vers node_modules, vous pouvez utiliser postcss à la place : https://medium.com/@bekzatsmov/how-to-import-css-from-node-modules-in-svelte-app-2a38b50924ff

Il est basé sur le modèle standard de Svelte : https://github.com/sveltejs/template

App.svelte

<script>
    import * as L from 'leaflet';
    import '../node_modules/leaflet/dist/leaflet.css'; // It might be better to use postcss.
    import { onMount } from 'svelte';

    let div = null;

    onMount(() => {
        let map = L.map(div, {
            center: [17.385044, 78.486671],
            zoom: 10
        });

        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    });
</script>

<div bind:this={div} style="height: 100vh; width: 100%;"></div>

main.js

import App from './App.svelte';

const app = new App({
    target: document.body
});

rollup.config.js

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

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            // 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: false,
            emitCss: true
        }),
        css({ output: 'public/build/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(),

        // 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
    }
};

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

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

export default app;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='http://stackoverflow.com/favicon.png'>
    <link rel='stylesheet' href='http://stackoverflow.com/global.css'>
    <link rel='stylesheet' href='http://stackoverflow.com/build/bundle.css'>
    <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X