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

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

我正在使用我的rails 5.1应用程序(不是webpacker，只是默认的资产管道)。

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

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

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.

但是一旦我预编译我的资产(环境无关紧要)或者让Heroku打包我的资产，我从我的应用程序中导入的所有样式表(节点模块的)。sass文件不再工作了。

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.

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

So this:

所以这个:

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

Compiles to this in development:

在发展中为此编写:

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

and to this in production:

在生产过程中

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

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

同时加载node_module / nodemodule。css单独作为资产，但是浏览器不能解析它。Javascript效果很好。

3 个解决方案

#1

The links are from my project that you can use as reference in your asset.rb you need to include the /node_modules path in your default load_path.

这些链接来自我的项目，您可以在您的资产中作为参考。rb需要在默认的load_path中包含/node_modules路径。

If you open the rails console and input Rails.application.config.assets.paths you should see the new path /yourproject/node_modules added.

如果打开rails控制台并输入rails .application.config.assets。应该会看到添加了新的路径/项目/node_modules。

Then you simply write:

然后你只写:

@import "nodemodule.css"

In my case for bootstrap 4 in my application.scss

对于我的应用程序中的bootstrap 4, scss

@import bootstrap/scss/bootstrap

which correspond to the file in node_modules/bootstrap/scss/bootstrap.scss

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

for jquery.js and bootstrap.js you can check my application.js

jquery。js和引导。你可以看看我的申请

#2

The node_modules need to be installed with npm install for example, so they're probably not getting installed on Heroku. Check out https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app

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

Most likely, you need to setup a Node.js buildpack which will install your npm dependencies.

最可能的情况是，您需要设置一个节点。js构建包，它将安装npm依赖项。

#3

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.

我终于找到问题了。这是一个非常讨厌的sass-rails gem缺陷& Rails spro佝偻病组件的不幸设计。

1) sass-rails

@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.

@import似乎不能像处理其他资产那样处理node_modules。当这些其他资产被编译成一个文件时，node_modules只会被引用，被浏览器作为单独的源加载，但最终不会被浏览器使用。

2) sprockets

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

spro佝偻病的require语句只有在文件的开头才有效。或者正如他们在文件中所写的:

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.

注意:只有当指令出现在任何应用程序代码之前时，才会进行处理。一旦有一行不包含注释或空格，spro佝偻病将停止寻找指令。如果您在文档的“header”之外使用一个指令，它将不会做任何事情，也不会引发任何错误。

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

但是，在我的例子中，我是从一个文件导入指令的，这个文件本身是从application.sass导入的。