`@import` not importing directives from `node_modules` folder

[jonhue]

Expanding on #414

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

I wrote a more detailed post here.

This behavior does not appear to be a problem in development.

[rafaelfranca]

Is the node_modules directory inside the sprockets load paths?

[jonhue]

@rafaelfranca

Yes it is. As I mentioned in the linked post, I can reference it using Sprockets' require.

[s0nspark]

I am actually seeing this issue with the bootstrap-datepicker gem as well. This line in my application.sass file:

@import "bootstrap-datepicker3.css"

compiles properly in development (i.e. the contents of {gempath}/vendor/stylesheets/bootstrap-datepicker3.css are served inline in the resulting application.css asset) but in production this @import directive is passed on unprocessed.

Other similar directives work as expected. For now I've worked around the issue by reverting to using an application.css file with Sprocket requires.

[jonhue]

This behavior cannot be desired ...

[luccasmaso]

Same here @jonhue. Did you find any solutions?

[dglancy]

If the node_module happens to have *.scss files in them, you can @import those. Its straight up pre-built css that appears to not be available. The sprockets require approach doesn't appear to always work either.

[fauno]

has anyone found a workaround for packages that only ship css files?

[fauno]

in my case was it because i was importing the css file with the extension. i've removed it and the compiled assets work in production

[eveevans]

In my case I change the @import using sass to use css.

Not working:
@import "../bulma/sass/components/navbar.sass";

Working:
@import "../bulma/sass/components/navbar.css";