temporarly use 3rd css source to prevent the tilde(~) problem when import css from node_modules.

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

@import '~maplibre-gl/dist/maplibre-gl.css';

@import 'https://code.bdstatic.com/npm/maplibre-gl@1.15.2/dist/maplibre-gl.css';

/*@import '~maplibre-gl/dist/maplibre-gl.css';*/

/* https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules */

.map-container {

  height: 400px;

  width: 100%;