`@import` not importing directives from `node_modules` folder
jonhue opened this issue · comments
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.
Is the node_modules directory inside the sprockets load paths?
Yes it is. As I mentioned in the linked post, I can reference it using Sprockets' require.
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.
This behavior cannot be desired ...
Same here @jonhue. Did you find any solutions?
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.
has anyone found a workaround for packages that only ship css files?
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
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";