使用 Rails 中的 Webpack 从 node_modules 解析 SCSS 中的相对图像链接 6

Question

我正在尝试将 MediaElement.js 合并到 Rails 6 应用程序中，并且我正在尝试这样做 "the right way" 对于 Rails 6 ，即，使用 yarn 安装模块并使用 Webpacker 管理它。

在普通 HTML 中，使用 CDN，我只需将以下内容放入我的 <head> 标签中：

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.10/build/mediaelement-and-player.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.10/build/mediaelementplayer.css">

试图将其转换为 WebPacker，我将此行添加到 /app/javascript/packs/application.js:

require("mediaelement/build/mediaelement-and-player.min")

这一行到 /app/javascript/packs/application.scss：

@import '~mediaelement/build/mediaelementplayer';

但是，当我点击该页面时，application.self-[…].css 不包括 mediaelementplayer CSS，JavaScript 控制台显示：

application.scss:4 Uncaught Error: Cannot find module './mejs-controls.svg'
    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/packs/application.scss (application.scss:4)
    at __webpack_require__ (bootstrap:19)
    at Object../app/javascript/packs/application.scss (application.scss?86ad:2)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

它正在查找的文件确实存在于node_modules/mediaelement/build/mejs-controls.svg。

如何让Webpack/Webpacker正确解析这些相关资源？

Answer 1

我遇到了和你完全一样的问题。您正在导入的 css 正在加载到与 /app/javascript/packs/application.scss 相同的目录中，因此当它查找 mejs-controls.svg 时，它会在您的 rails 应用程序的相同目录中查找但没有找到它。

您需要从 node_modules/mediaelement/build/mejs-controls.svg 复制 svg 文件并将其放在与您的 application.scss 相同的目录中。这样做对我来说解决了。

使用 Rails 中的 Webpack 从 node_modules 解析 SCSS 中的相对图像链接 6

Resolve relative image links in SCSS from node_modules with Webpack in Rails 6

webpack

webpacker

ruby-on-rails-6