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.