Rails：预编译资产缺少节点模块答案

【问题标题】：Rails: Precompiled assets missing node modulesRails：预编译资产缺少节点模块
【发布时间】：2018-05-17 01:23:06
【问题描述】：

我在我的 rails 5.1 应用程序中使用 yarn（不是 webpacker，只是默认的资产管道）。

在开发环境中运行本地服务器，我的资产没有遇到任何问题。

但只要我预编译我的资产（环境无关紧要）或让 Heroku 打包我的资产，我从 application.sass 文件中导入的所有（节点模块的）样式表都不再工作了。

这种行为的原因是 sass 将所有文件编译到一个输出文件中，但由于某种原因似乎错过了包含节点模块并单独加载这些文件的 @import 语句。

所以：

@import "components/index.sass"
@import "nodemodule/nodemodule.css"

在开发中编译到这个：

// content of "components/index.sass"
// content of "nodemodule/nodemodule.css"

生产中的这个：

// content of "components/index.sass"
@import "nodemodule/nodemodule.css"

虽然将node_module/nodemodule.css 作为资产单独加载，但浏览器无法解析它。 Javascript 工作正常。

【问题讨论】：

感谢您的赏金..您需要任何帮助吗？
@FabrizioBertoglio 我还没有时间测试这个，因为我目前正忙于另一个项目。赏金快到期了，所以我将它分配给似乎最有帮助的答案。希望这个周末我能调查一下这个问题。
好的。需要帮助时告诉我

【解决方案1】：

链接来自我的项目，您可以用作参考在您的 asset.rb 中，您需要在默认 load_path 中包含 /node_modules 路径。

如果您打开rails console 并输入Rails.application.config.assets.paths，您应该会看到添加了新路径/yourproject/node_modules。

然后你只需写：

@import "nodemodule.css"

在我的 application.scss 中，我的 bootstrap 4

@import bootstrap/scss/bootstrap

对应node_modules/bootstrap/scss/bootstrap.scss中的文件

jquery.js 和 bootstrap.js 你可以查看我的application.js

【讨论】：

【解决方案2】：

我遇到了同样的问题。受到this comment 的启发，从导入中删除文件扩展名最终修复了它。

这不起作用：

@import "@shopify/polaris/styles.css";
@import "@uppy/core/dist/style.css";
@import "@uppy/dashboard/dist/style.css";

虽然这样做了：

@import "@shopify/polaris/styles";
@import "@uppy/core/dist/style";
@import "@uppy/dashboard/dist/style";

【讨论】：

【解决方案3】：

例如，node_modules 需要使用npm install 安装，因此它们可能不会安装在 Heroku 上。查看https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app

很可能，您需要设置一个 Node.js buildpack 来安装您的 npm 依赖项。

【讨论】：

我已经添加了 Node.js 构建包。 heroku 日志说，正在安装 node_modules。
只是好奇，在您的 sn-ps 中，文件夹名称为“node_module”而不是“node_modules”。是不是打错字了？
yarn 替换 npm
@JeffF。在我的实际代码中，我完全省略了node_modules/。据我了解，如果 node_modules 的子文件夹在我的资产路径中，我应该可以直接引用它。

【解决方案4】：

我终于找到了问题所在。这是 sass-rails gem 的一个非常讨厌的错误，也是 Rails 的 sprockets 组件的不幸设计。

@import 似乎无法与 node_modules 一起使用，因为它与其他资产一样。虽然这些其他资产被编译到一个文件中，但 node_modules 仅被引用，被浏览器作为单独的源加载，但最终不会被浏览器使用。

Sprockets 的require 语句仅在位于文件开头时才有效。或者正如他们在documentation 中所说的那样：

注意：指令只有在任何应用程序代码之前才会被处理。一旦你有一行不包含注释或空格，那么 Sprockets 将停止寻找指令。如果您在文档的“标题”之外使用指令，它不会做任何事情，也不会引发任何错误。

但是，就我而言，我从一个文件中导入指令，该文件本身是从application.sass 导入的。

【讨论】：