Rails: Precompiled assets missing node modules

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

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

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.

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

Then you simply write:

@import "nodemodule.css"

In my case for bootstrap 4 in my application.scss

@import bootstrap/scss/bootstrap

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

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

I was having the same problem. Inspired by this comment removing file extensions from the imports ended up fixing it.

This didn't work:

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

while this did:

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

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.

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.

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:

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.

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