Rails: Precompiled assets missing node modules

Question

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.

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.

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.

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.

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

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

Answer 2

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

Answer 3

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.