# Assets
Static assets like images and fonts support is enabled out-of-box
and you can link them into your JavaScript app code and have them
compiled automatically.
## Import from node modules
You can also import styles from `node_modules` using the following syntax.
Please note that your styles will always be extracted into `[pack_name].css`:
```sass
// app/javascript/styles.sass
// ~ to tell webpack that this is not a relative import:
@import '~@material/animation/mdc-animation'
@import '~bootstrap/dist/css/bootstrap'
```
```js
// Your main app pack
// app/javascript/packs/app.js
import '../styles'
```
```erb
<%# In your views %>
<%= javascript_pack_tag 'app' %>
<%= stylesheet_pack_tag 'app' %>
```
## Import from Sprockets using helpers
It's possible to link to assets that have been precompiled by Sprockets. Add the `.erb` extension to your JavaScript file, then you can use Sprockets' asset helpers:
```erb
<%# app/javascript/my_pack/example.js.erb %>
<% helpers = ActionController::Base.helpers %>
const railsImagePath = "<%= helpers.image_path('rails.png') %>"
```
This is enabled by the `rails-erb-loader` loader rule in `config/webpack/loaders/erb.js`.
## Using babel module resolver
You can also use [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver) to reference assets directly from `app/assets/**`
```bash
yarn add babel-plugin-module-resolver
```
Specify the plugin in your `babel.config.js` with the custom root or alias. Here's an example:
```js
{
plugins: [
[require("module-resolver").default, {
"root": ["./app"],
"alias": {
"assets": "./assets"
}
}]
]
}
```
And then within your javascript app code:
```js
// Note: we don't have to do any ../../ jazz
import FooImage from 'assets/images/foo-image.png'
import 'assets/stylesheets/bar'
```
## Link in your Rails views
You can also link `js/images/styles/fonts` used within your js app in views using
`asset_pack_path` helper. This helper is useful in cases where you just want to
create a `` or `` for an asset.
```yml
app/javascript:
- packs
- hello_react.js
- styles
- hello_react.css
- images
- calendar.png
```
```erb
<%= asset_pack_path 'hello_react.css' %>
<%# => "/packs/hello_react.css" %>
<% # => %>
<%= image_pack_tag 'images/calendar.png' %>
<% # => %>
```