0

我正在尝试将 Turbolinks 添加到我的 Rails 6 应用程序中（我参加聚会迟到了）并且我遇到了 TailwindCSS 和 Mapbox GL JS 的显示问题。

如果我在带有地图的页面上开始我的旅程（新标签或刷新页面），那么在我访问期间一切都会按预期进行（我可以反复离开并返回带有地图的页面，并且每次一切正常预期的）。我什至可以访问带有其他Mapbox 实例的页面并且这些实例正确显示（我正在慢慢地从script每个页面上的孤立标签转换到 StimulusJS，这让我有几个提供 Mapbox 的控制器，例如 mapcity_controller 和 mapstreet_controller - 我没有不认为这是问题的一部分，但我不想留下任何机会）。

但是，如果我在没有地图的其他页面（新选项卡或刷新页面）上开始我的旅程，然后导航到带有 Mapbox 的页面，则fixedandw-*样式不起作用。如果我滚动页面，地图会随着内容向上流动，并且地图不会填满w-2/3它应该填满的整个空间。

<div data-controller="mapbox" class="flex flex-col-reverse flex-wrap mt-10 md:flex-row">
  <div class="h-full p-2 mt-64 overflow-scroll md:mt-0 lg:mt-0 md:w-1/2 lg:w-1/3">
    CONTENT
  </div>

  <div class="md:w-1/2 lg:w-2/3">
    <div id="map" class="fixed w-full h-64 md:w-1/2 lg:w-2/3 md:bottom-0 md:right-0 md:h-full"></div>
  </div>
</div>

我认为它可能是父md:w-1/2 lg:w-2/3容器 div，但删除它根本不会改变行为：

<div data-controller="mapbox" class="flex flex-col-reverse flex-wrap mt-10 md:flex-row">
  <div class="h-full p-2 mt-64 overflow-scroll md:mt-0 lg:mt-0 md:w-1/2 lg:w-1/3">
    CONTENT
  </div>

  <div id="map" class="fixed w-full h-64 md:w-1/2 lg:w-2/3 md:bottom-0 md:right-0 md:h-full"></div>
</div>

如果我从等式中删除 Mapbox，则在任一访问场景中一切都会按预期工作（无论该页面是否是我第一次访问，我总是有一个全宽、非滚动的右窗格）：

<div class="flex flex-col-reverse flex-wrap mt-10 md:flex-row">
  <div class="h-full p-2 mt-64 overflow-scroll md:mt-0 lg:mt-0 md:w-1/2 lg:w-1/3">
    LOTS OF MULTI-LINE CONTENT TO CAUSE SCROLLING
  </div>

  <div class="fixed w-full h-64 bg-blue-300 md:w-1/2 lg:w-2/3 md:bottom-0 md:right-0 md:h-full">OTHER CONTENT</div>
</div>

我猜我的 StimulusJS 控制器的某些东西不能与 Turbolinks 一起正常工作。我已经删除了所有额外的代码（设置缩放级别、添加源和图层等），但问题仍然存在。我试过使用connectas well as initialize，结果相同。

import { Controller } from 'stimulus'
import mapboxgl from 'mapbox-gl'

export default class extends Controller {
  connect () {
    mapboxgl.accessToken = "my-access-token"
    this.map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/satellite-streets-v11',
      center: [0,0],
      zoom: 2,
      minZoom: 1
    })
  }

  disconnect () {
    this.map.remove()
    this.map = undefined
  }
}

以防万一，这是我的index.js文件：

import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'

const application = Application.start()
const context = require.context('controllers', true, /_controller\.js$/)
application.load(definitionsFromContext(context))

这是我的packs/application.js文件：

require('@rails/ujs').start()
require('turbolinks').start()
require('stylesheets/application.scss')
require('stylesheets/custom.scss')
require('src')
import 'controllers'

该application.scss文件包含：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

没有任何自定义样式custom.scss适用于地图或其容器 div。

4

1 回答 1

1

深呼吸

好的，这真的很尴尬

当我最初实现这个站点时，我采用了一种<%= yield :styles %>在头部和<%= yield :scripts %>页面底部的方法，在<% content_for(:scripts) do %>任何我想要javascript的地方都有块。

旁白的声音：他不应该这样做。

<% content_for(:styles) do %>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<% end %>

如果我删除我的:styles块并将样式表标签直接放在头部，一切都会按预期工作。

于 2020-10-29T22:55:50.113 回答