如何在导轨 6 中包含 npm package 中的 css

Question

我正在开发一个 rails 6 应用程序，但我遇到了 npm package 和 Rails 管道的问题。 我怀疑问题是我缺乏经验和 npm package 结构。 我需要使用 npm package phenogrid。 这个package结构如下：

• 距离
• • fonts
• • 图片
• • phenogrid-bundle.css
• • phenogrid-bundle.js
• js
• • phenogrid.js
• • 其它文件

作为第一个实现，我已经包含了这个 package 如下：

应用程序/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("bootstrap");
require("cytoscape");
require("phenogrid"); // HERE
global.toastr = require("toastr");

import 'phenogrid/dist/phenogrid-bundle.css' //HERE
import "../stylesheets/application"

app/views/patients/show.html.erb （加载加载phenogrid的js包的视图）

<%= javascript_packs_with_chunks_tag 'hpo_interface' %>

<div id="cy_hpo_demo" style="width: '800px', height: '800px' "></div>
.
.

应用程序/javascript/packs/hpo_interface.js

import $ from 'jquery';
import cytoscape from 'cytoscape';
import phenogrid from 'phenogrid'; // here
.
.
Phenogrid.createPhenogridForElement( ...... )

所有这些设置使 phenogrid 在我的开发环境中完美运行。 当我在生产环境（AWS 服务器）中部署此配置时，js 小部件工作，但 css 消失了。 寻找我在 webpacker 文档中找到的解决方案： https://github.com/rails/webpacker/blob/master/docs/css.md 。 我意识到我没有使用stylesheet_pack_tag和其他步骤。 所以我将我的实现修改为：

应用程序/视图/患者/show.html.erb

<%= stylesheet_pack_tag 'phenogrid-bundle' %>
<%= javascript_packs_with_chunks_tag 'hpo_interface' %>

<div id="cy_hpo_demo" style="width: '800px', height: '800px' "></div>
.
.

app/javascript/packs/stylesheets/application.scss （此文件由 app/javascript/packs/application.js 加载。）

@import 'toastr';
@import 'phenogrid/dist/phenogrid-bundle.css';
@import 'bootstrap/scss/bootstrap';

通过这些修改，在开发环境中会在浏览器控制台中出现以下错误：

Uncaught Error: Cannot find module './fonts/fontawesome-webfont.eot?v=4.7.0'
    at webpackMissingModule (application.scss:4)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/stylesheets/application.scss (application.scss:4)
    at __webpack_require__ (bootstrap:79)
    at Object../app/javascript/stylesheets/application.scss (application.scss?4568:2)
    at __webpack_require__ (bootstrap:79)
    at Module.<anonymous> (application.js:1)
    at Module../app/javascript/packs/application.js (application.js:31)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback (bootstrap:32

The required file is within the fonts folder of the phenogrid package so I look again to solve this problem and in webpacker documentation I found a workaround focused in replace the relative urls at asset compilation time: https://github.com/rails/webpacker /blob/master/docs/css.md#resolve-url-loader 。 我应用了建议的解决方案，但错误仍然存在。 我也试过这个： https://github.com/rails/webpacker/blob/a84a4bb6b385ae17dd775a6034a0b159b88c6ea9/docs/webpack.md#url-loader ，错误如下：

phenogrid-bundle.css:10 Uncaught Error: Cannot find module './images/ui-icons_444444_256x240.png'
    at webpackMissingModule (phenogrid-bundle.css:10)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/phenogrid/dist/phenogrid-bundle.css (phenogrid-bundle.css:10)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/phenogrid/dist/phenogrid-bundle.css (phenogrid-bundle.css?18d4:2)
    at __webpack_require__ (bootstrap:79)
    at Module.<anonymous> (application.js:1)
    at Module../app/javascript/packs/application.js (application.js:31)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)

我认为设置加载程序可以解决我的问题，但我对 webpacker 和 rails js/asset 管道完全陌生。 我不知道如何解决这个问题，所以任何建议都非常受欢迎。 提前谢谢佩德罗·西奥内

Answer 1

yarn add -D resolve-url-loader

// webpack/environment.js
const { environment } = require('@rails/webpacker')

// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader',
  options: {
    sourceMap: true,
    absolute: true
  }
})