Simple css import from node_modules

[ulugbekov]

First we add yarn add font-awesome
Then
In the app/javasctipts/packs/application.scss

@import "font-awesome";

Can not locate? Why?

Thanks

[gauravtiwari]

@ulugbekov For CSS you need to import exact file from font-awesome module

// Something like this, check node_modules/font-awesome folder
import 'font-awesome/css/font-awesome.css'

[krazyjakee]

I have the same issue with javascript. No matter where I put this exact import, it will not appear in my manifest.

EDIT: Yes, I can confirm css files (font-awesome) is also not appearing in the manifest.

[gauravtiwari]

Here you go, for example if you put the line in hello_vue.js pack you will get hello_vue.css

[wtfiwtz]

In app/javascripts/packs/application.sass I had to put a ~ in to pick up the file from node_modules/:

@import '~font-awesome/css/font-awesome'

[gauravtiwari]

@wtfiwtz Yes that's correct - so in JS file you don't need to put ~ but in sass or scss you have add a ~.

[fernandes]

@gauravtiwari just commenting to say thank you! your example helped me here!

[axhamre]

For anyone else coming here that need to import normalize.css in .scss-file, this is what worked for me:

@import "~normalize.css";

Note a couple of things:

1. The semi-colon
2. No pre-fixing of folder name

[ViggoV]

I've had no luck with any of these solutions. Locally it works with @import 'codemirror/lib/codemirror.css' but not with ~.

After deployment, though, all css imported from node_modules subfolders is missing from the output folder.

Edit:
Nevermind. It seems that I forgot to put my css in the webpack loop.. Doh

[reichertm]

If you have upgraded your app from an earlier version of Rails make sure you add the following line: Rails.application.config.assets.paths << Rails.root.join('node_modules') in config/initializers/assets.rb. This is included by default in the newly generated apps.

Then in app/javascripts/packs/application.sass the following should do the job:
@import 'font-awesome/css/font-awesome'; (no ~ and no file extension)