Symfony 4：将传单贴图添加到树枝模板

Question

为了在我的树枝中包含传单库，我在 assets/js/app.js 中添加了以下代码

import bsCustomFileInput from "bs-custom-file-input";
import L from "leaflet";
import 'devbridge-autocomplete';
$(document).ready(function () {
    bsCustomFileInput.init();
});

// Pour une raison obscure, lorsque nous utilisons Webpack, nous devons redéfinir les icons
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

require('leaflet-easybutton');
require('@ansur/leaflet-pulse-icon');
require ('../scss/map.scss');
class Map {
    init(mapId, center = [45.5, 2], zoom = 5) {
        this.map = L.map(mapId, { center: center, zoom: zoom });
        L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);
    }
}

export default Map;

map.scss 页面包含：

// assets/scss/map.scss
@import "~boosted";
@import "~leaflet";
@import "~@ansur/leaflet-pulse-icon/dist/L.Icon.Pulse.css";

#map {
  height: 500px;
}

最后我得到了渲染模板：

{% extends 'base.html.twig' %}
{% block title %}map{% endblock %}
{% block breadcrumb_second %}
{% endblock breadcrumb_second %}
{% block body %}
    <div class="container">
        <div class="row">
            <div class="col-10">
                <div id="map"></div>
            </div>
            <div class="col-2">
                <input type="text" name="address" id="address" />
            </div>
        </div>
    </div>
{% endblock %}

当我刷新页面但看不到我的地图时。不知道是不是漏了一些代码？

仅供参考：我运行 npm watch 命令。

提前谢谢你:)