如何在導軌 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
  }
})