Adding external js files on Rails 6

Question

I created a folder named "custom" under app->javascript->packs and place the following external js:

metisMenu.min.js
startmin.js

Then on under app->javascript->packs->application.js I required the stated js plugin above:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("custom/metisMenu.min").start()
require("custom/startmin").start()
require("channels")


import 'bootstrap'
import './stylesheets/application.scss'

Unfortunately, still this did not work. Any idea what am I doing wrong?

Also is it ok to place all of the custom css under app->javascript->packs->stylesheets (folder) and not on the assets->stylesheets anymore since Rails 6 is using webpacker?

Doesn't it work like that? require("custom/startmin")

demir
– demir

2019-09-16 11:26:46 +00:00
Commented Sep 16, 2019 at 11:26 — demir
– demir, Commented Sep 16, 2019 at 11:26

Samy Kacimi · Accepted Answer · 2019-09-16 12:07:26Z

3

Your folder needs to be structured like that:

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("custom")

app/javascript/custom/index.js

require("myScript")
require("mySecondScript")

The myScript.js and mySecondScript.js files, for instance, will be located in the same folder ie app/javascript/custom.

edited Sep 16, 2019 at 12:07

answered Sep 16, 2019 at 11:47

Samy Kacimi

1,2389 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lyzard Kyng Over a year ago

You don't need .js extension in the second snippet

user12073145 Over a year ago

is this also applies to CSS? for instance I have the stylesheet folder and i have the _metisMenu.min.css and _startmin.css files can I also include it under application.scss by adding import "metisMenu.min"; import "startmin"; ???

demir · Accepted Answer · 2019-09-17 12:39:05Z

1

You can add custom js files like this:

Add your js files to app/javascript folder

app/javascript/custom/metisMenu.min.js
app/javascript/custom/startmin.js

Require js files in app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()

# custom js files
require("custom/metisMenu.min")
require("custom/startmin")

Add <%= javascript_pack_tag 'application' %> to application.html.erb

UPDATE

You can add style files like this:

Add your style files to app/javascript folder

app/javascript/stylesheets/metisMenu.min.scss

Import style files in app/javascript/packs/application.js
```
import "stylesheets/metisMenu.min"
```
Add <%= stylesheet_pack_tag 'application' %> to application.html.erb
Set extract_css: true in config/webpacker.yml

edited Sep 17, 2019 at 12:39

answered Sep 16, 2019 at 11:46

demir

4,7272 gold badges25 silver badges34 bronze badges

4 Comments

user12073145 Over a year ago

is this also applies to CSS? for instance I have the stylesheet folder and i have the _metisMenu.min.css and _startmin.css files can I also include it under application.scss by adding import "metisMenu.min"; import "startmin"; ???

demir Over a year ago

@JoanBuan Yes you can import sytle files. I updated the answer.

Lyzard Kyng Over a year ago

@demir update your answer with (a) changing stylesheet_link_tag with stylesheet_pack_tag in application.html.erb and (b) setting extract_css: true in config/webpacker.yml

demir Over a year ago

@LyzardKyng I assumed stylesheet_pack_tag helper was added. I'il update the answer.

Collectives™ on Stack Overflow

Adding external js files on Rails 6

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related