Import leaflet in single component svelte

user_11029695 0
Viewed 1102

I'm using in a single component leaflets plugin, for the moment I put the js and css in public/index.html but i need to find a way to import only the js and css in the single component. Also i tryed with svelte::head but it didn't work. Also this project is going to be used like a node_modules, so i need to find a way to not put the js and css files in folder public. Any suggestions? I tryed to import leaflet installing leaflet with npm and import like

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

but it didn't work.

leaflet svelte css javascript
1 Answers

You can import the styles using rollup-plugin-css-only. To avoid the ugly css import with a relative path to node_modules you may want to use postcss instead: https://medium.com/@bekzatsmov/how-to-import-css-from-node-modules-in-svelte-app-2a38b50924ff

This is based on the standard Svelte template: 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='/favicon.png'>
    <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/build/bundle.css'>
    <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>
user_13909270
Related