Rails:预编译资产缺少节点模块

Question

我正在使用我的rails 5.1 app纱线(不是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工作正常.

Answer 1

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

这不起作用：

@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";

Answer 2

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

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

然后你只需写:

@import "nodemodule.css"

在我的情况下我的引导4 application.scss

@import bootstrap/scss/bootstrap

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

为了jquery.js,bootstrap.js你可以检查我的application.js

Answer 3

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

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

Sprockets 的require语句仅在文件开头时才起作用。或者正如他们在文档中所说的那样：

注意：仅当指令位于任何应用程序代码之前时才会进行处理。一旦有一行不包含注释或空格，Sprockets 将停止寻找指令。如果您在文档的“标题”之外使用指令，它将不会执行任何操作，也不会引发任何错误。

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