Code Mirror无法在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之后，看来问题可能是由于css无法正确加载到我的editor.js文件中，该文件是我导入css文件以进行代码镜像的位置。

edit-2：

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

Answer 1

如果将来有人遇到类似问题，我就能找到答案。

问题是由于我对webpack的误解。

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

解决方法是在application.scss中创建一个app/javascript/src文件。我在此文件中添加了@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。