導入 leaflet 單組件苗條

Question

我在單個組件傳單插件中使用，目前我將 js 和 css 放在 public/index.html 但我需要找到一種方法只在單個組件中導入 js 和 ZC7A628CBA22E28EB17B5F5CAAE2 我也嘗試過 svelte::head 但它沒有用。 此外，這個項目將像 node_modules 一樣使用，所以我需要找到一種方法不將 js 和 css 文件放在公共文件夾中。 有什么建議么？ 我嘗試導入 leaflet 安裝 leaflet 與 npm 並導入

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

但它沒有用。

Answer 1

您可以使用 rollup-plugin-css-only 導入 styles。 為了避免丑陋的 css 導入與 node_modules 的相對路徑，您可能希望使用 postcss 代替： https://medium.com/@bekzatsmov/how-to-import-css-from-node-modules-in-svelte-app -2a38b50924ff

這是基於標准 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;

索引.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>

導入 leaflet 單組件苗條

問題描述

1 個解決方案

解決方案1
3 2020-07-22 19:39:52

導入 leaflet 單組件苗條

問題描述

1 個解決方案

解決方案1 3 2020-07-22 19:39:52

解決方案1
3 2020-07-22 19:39:52