Webpacker: CSS assets from node module not included

Created on 13 Apr 2017  路  4Comments  路  Source: rails/webpacker

I installed the package toastr and for some reason I do not understand,
The css is not being add by this line.
<%= javascript_pack_tag 'toastr' %>

Please is there a workaround for this?
How can I uses css of installed node modules.

Most helpful comment

I got it to work, based on @p0wl recommendation
what I did was to create a dummy file in app/javascript/pack with filename dummy.js
Then I required the toastr in the file using import.
import 'toastr/build/toastr.min.css';

In my layout file I added
<%= stylesheet_pack_tag 'dummy' %>

And it works fine ....

Thanks @p0wl

I will go ahead to close this now....

I also would suggest we make it more clearer on the readme doc.

All 4 comments

you need to require the css of toastr, so in the file where you require('toastr'); add require('toastr/build/toastr.min.css); (or import 'toastr/build/toastr.min.css'; if you are using es6). Webpacker will than create a css pack that you can include with <% stylesheet_pack_tag 'YOUR_PACK_NAME' %>

see https://github.com/rails/webpacker#linking-to-static-assets

@p0wl, what file should I include it as?
I added it as a module and it is not listed in my app/javascript/pack directory but it is in my node_modules directory

Do I need to create a toastr.js in my app/javascript/pack so I can require it in the file.

its kind of confusing without proper directory structure.

I got it to work, based on @p0wl recommendation
what I did was to create a dummy file in app/javascript/pack with filename dummy.js
Then I required the toastr in the file using import.
import 'toastr/build/toastr.min.css';

In my layout file I added
<%= stylesheet_pack_tag 'dummy' %>

And it works fine ....

Thanks @p0wl

I will go ahead to close this now....

I also would suggest we make it more clearer on the readme doc.

May I ask question: why doesn't webpacker automatically add library's assets instead of doing manually. Thanks

Was this page helpful?
0 / 5 - 0 ratings