12

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.

3
  • thanks for the bounty .. do you need any help? Dec 16, 2017 at 12:09
  • @FabrizioBertoglio I haven't found the time to test this yet, because I am currently occupied by another project. Bounty almost expired, so I assigned it to the answer appearing to be the most helpful. Hopefully I am able look into the problem this weekend.
    – heroxav
    Dec 16, 2017 at 12:13
  • ok. let me know when you need help Dec 16, 2017 at 14:52

4 Answers 4

10
+50

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

enter image description here

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

10

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";
2
  • 1
    Thank you. You saved my day
    – fongfan999
    May 23, 2020 at 18:53
  • 1
    For some reason, this worked locally, but didn't work after deploying to Heroku. This solution fixed it for me.
    – Andrew
    Aug 24, 2020 at 22:28
4

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.

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

4
  • I have added the Node.js buildpack. The heroku logs say, that node_modules are being installed.
    – heroxav
    Dec 10, 2017 at 8:51
  • Just curious, in your snippets you have the folder name as ‘node_module’ instead of ‘node_modules’. Is that a typo?
    – Jeff F.
    Dec 10, 2017 at 14:50
  • yarn replaces npm Dec 15, 2017 at 16:37
  • @JeffF. In my actual code, I omitted node_modules/ completely. As far as I understand I should be able to reference the subfolders of node_modules directly, if it is in my asset paths.
    – heroxav
    Dec 21, 2017 at 20:16

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.