在Heroku Rails 6应用程序上无法正确呈现代码镜像

Question

我最近在我的rails 6应用程序中添加了代码镜像编辑器。我在本地环境(ubuntu 18.04)上运行得很好，但当我将应用程序部署到heroku时，代码镜像编辑器会将实际的文本编辑区域渲染到远低于div的位置。它似乎也在填充x，here是它的截图。靠近顶部的x实际上是未显示的顶部编辑器的一部分，而下面的x是图中主编辑器的一部分。

这是我的application.js文件：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import { autocompleteExport } from '../custom/autocomplete';
import { initialize } from '../custom/editor';
import { formatToc } from '../custom/page_display';

window.jQuery = $;
window.$ = $;

$(document).on("turbolinks:load", autocompleteExport.categories)
$(document).on("turbolinks:load", autocompleteExport.search)
$(document).on("turbolinks:load", autocompleteExport.admins)
$(document).on("turbolinks:load", initialize)
$(document).on("turbolinks:load", formatToc)

下面是初始化编辑器的编辑器文件：

import CodeMirror from 'codemirror/lib/codemirror.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/markdown/markdown.js'

function initialize(){
    let textArea = document.getElementById('page_edit_content')
    let editor = document.getElementById('content-editor')

    if(textArea && !editor){
        var contentEditor = CodeMirror.fromTextArea(textArea, {
                                                    lineWrapping: true,
                                                    mode: "markdown",
                                                });

        contentEditor.display.wrapper.id = "content-editor"
    }

    textArea = null
    editor = null

    textArea = document.getElementById('page_edit_summary')
    editor = document.getElementById("summary-editor")

    if(textArea && !editor){
        var contentEditor = CodeMirror.fromTextArea(textArea, {
            lineWrapping: true,
            mode: "markdown",
        });

        contentEditor.display.wrapper.id = "summary-editor"
    }

    textArea = null
    editor = null

    textArea = document.getElementById('page_content')
    editor = document.getElementById("new-content-editor")

    if(textArea && !editor){
        var contentEditor = CodeMirror.fromTextArea(textArea, {
            lineWrapping: true,
            mode: "markdown",
        });

        contentEditor.display.wrapper.id = "new-content-editor"
    }

    textArea = null
    editor = null

    textArea = document.getElementById('page_summary')
    editor = document.getElementById("new-summary-editor")

    if(textArea && !editor){
        var contentEditor = CodeMirror.fromTextArea(textArea, {
            lineWrapping: true,
            mode: "markdown",
        });

        contentEditor.display.wrapper.id = "new-summary-editor"
    }
}

export {initialize}

最后，这里是有问题的一个视图：

<% @page_title = "New Page" %>

<div class="container form-container">
  <%= form_for @page, url: world_pages_path(params[:world_name]), html: {style: "width: 100%"} do |f| %>
    <%= render 'shared/error_messages', errors: flash[:errors] %> 
    <div class="form-group">
      <%= f.label :title %>
      <%= f.text_field :title, autofocus: true, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :summary %>
      <%= f.text_area :summary, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :content %>
      <%= f.text_area :content, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.submit "Create!", class: "btn btn-primary" %>
    </div>
    <% if params[:category] %>     
    <%= hidden_field_tag :category, params[:category] %>
    <% end %>
  <% end %>
</div>

我对可能导致这种情况的原因感到非常困惑，任何帮助都将不胜感激。

编辑：

在浏览了一下我的浏览器devtools后，问题看起来可能来自于我的editor.js文件中没有正确加载的css，这是我导入css文件以进行代码镜像的地方。

编辑-2：

当我从editor.js文件中删除css import语句时，我在开发中得到了相同的行为，所以我确定这就是问题所在。如果有人知道从节点模块导入样式的正确方法，那将非常有帮助

Answer 1

如果将来任何人遇到这样的事情，我都能找到答案。

这个问题源于我对webpack的误解。

我直接将css从节点模块导入到editor.js文件中。我仍然不是一个webpack专家，所以我不能说为什么它在本地工作，但是它没有正确地设置要由webpack在生产中编译的css文件。

修复方法是在app/javascript/src中创建一个application.scss文件。我就是在这个文件中添加了@import 'codemirror/lib/codemirror.css';

这样做之后，我将import '../src/application.scss'添加到我的application.js文件中，以便webpack知道如何编译css。

最后，我将<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>添加到我的application.html.erb布局文件中，它从编译后的文件中拉入css。