Rails：预编译资产缺少节点模块 [英] Rails: Precompiled assets missing node modules

问题描述

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

I am using yarn with my rails 5.1 app (not webpacker, just the default asset pipeline).

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

Running a local server in development environment, I experience no issues with my assets.

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

But as soon as I precompile my assets (the environment doesn't matter) or let Heroku package my assets, all stylesheets (of node modules) I imported from within my application.sass file don't work anymore.

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

The reason for that behavior is that sass compiles all files into one output file, but because of some reason appears to miss the @import statements which include node modules and load these files separately.

因此，

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

在开发中编译为此：

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

，并在生产中添加到此：

and to this in production:

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

加载 node_module / nodemodule.css 分别作为资产，但是浏览器无法解析它。

while loading node_module/nodemodule.css separately as an asset, but the browser cannot resolve it. Javascript works fine.

推荐答案

我终于找到了问题。这是 sass-rails gem&的非常讨厌的错误。

I have finally found the problem. It is a very nasty bug of the sass-rails gem & an unfortunate design of the sprockets component of Rails.

@import 似乎不适用于 node_modules ，就像处理其他资产一样。当其他资产被编译到一个文件中时， node_modules 仅被引用，由浏览器作为单独的源加载，但最终不会被浏览器使用。

@import does not seem to work with node_modules as it does with other assets. While those other assets get compiled into one file, node_modules only get referenced, loaded by the browser as separate sources, but ultimately not being used by the browser.

链轮的需要语句仅在文件开头才起作用。或者如他们在其文档中所述：

Sprockets' require statement does only work if it is at the beginning of a file. Or as they put it in their documentation:

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

Note: Directives are only processed if they come before any application code. Once you have a line that does not include a comment or whitespace then Sprockets will stop looking for directives. If you use a directive outside of the "header" of the document it will not do anything, and won't raise any errors.

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

However, in my case, I was importing directives from a file that itself was imported from application.sass.

这篇关于Rails：预编译资产缺少节点模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！