rails / sass-rails

Ruby on Rails stylesheet engine for Sass
MIT License
859 stars 333 forks source link

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

Closed jonhue closed 5 years ago

jonhue commented 6 years ago

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 commented 6 years ago

Is the node_modules directory inside the sprockets load paths?

jonhue commented 6 years ago

@rafaelfranca

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

s0nspark commented 6 years ago

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 commented 6 years ago

This behavior cannot be desired ...

luccasmaso commented 6 years ago

Same here @jonhue. Did you find any solutions?

dglancy commented 6 years ago

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 commented 6 years ago

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

fauno commented 6 years ago

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 commented 3 years ago

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