问题描述
我正在尝试将Turbolinks添加到我的Rails 6应用程序（我参加聚会很晚），并且TailwindCSS和MapBox GL JS出现显示问题。
如果我使用地图在页面上开始旅程（新标签页或刷新页面），那么在访问期间一切都会按预期进行（我可以反复离开并返回到带有地图的页面，每次一切都按预期进行）。我什至可以访问带有MapBox的 other 实例的页面，并且这些页面可以正确显示（我正在从每页上孤立的script标记缓慢过渡到StimulusJS中，这使我陷入了世俗的情绪提供MapBox的控制器，例如mapcity_controller和mapstreet_controller-我不认为这是问题的一部分，但我不想给任何机会。
但是，如果我从没有地图的其他页面开始旅程（新标签或刷新页面），然后导航到带有MapBox的页面，fixed和{{1} }样式无效。如果我滚动页面，则地图将随内容一起向上流动，并且地图不会填满应有的整个w-*空间。
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>
容器div，但是删除该容器根本不会改变行为：
md:w-1/2 lg:w-2/3如果我从等式中删除了MapBox，则在任何一种访问情况下，一切都可以按预期进行（无论页面是否是我的第一次访问，我始终具有全角非滚动右窗格）：
<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>
我猜想我的StimulusJS控制器上的某些东西不能正确使用Turbolinks。我删除了所有其他代码（设置缩放级别，添加源和图层等），问题仍然存在。我尝试使用<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>
和connect，但结果相同。
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";
中的所有自定义样式均不适用于地图或其容器div。
解决方法
深呼吸
好吧，这真的很尴尬?
当我最初实现此站点时，我在页面的顶部采用了<%= yield :styles %>的方式，在页面底部采用了<%= yield :scripts %>的方式，并在需要JavaScript的任何地方使用了
叙述者的声音：他不应该这样做。
<% content_for(:scripts) do %>如果我移除<% content_for(:styles) do %>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<% end %>
块并将样式表标签直接放在头部，一切都会按预期进行。