2

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?

Improve this question
1
  • Doesn't it work like that? require("custom/startmin")
    – demir
    CommentedSep 16, 2019 at 11:26

2 Answers 2

Reset to default
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.

Improve this answer
2
  • 1
    You don't need .js extension in the second snippet
    – Lyzard Kyng
    CommentedSep 16, 2019 at 12:00
  • 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"; ???
    – user12073145
    CommentedSep 16, 2019 at 12:42
1

You can add custom js files like this:

  1. Add your js files to app/javascript folder

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

  2. 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")
  3. Add <%= javascript_pack_tag 'application' %> to application.html.erb

UPDATE

You can add style files like this:

  1. Add your style files to app/javascript folder

    app/javascript/stylesheets/metisMenu.min.scss

  2. Import style files in app/javascript/packs/application.js

    import "stylesheets/metisMenu.min"
  3. Add <%= stylesheet_pack_tag 'application' %> to application.html.erb
  4. Set extract_css: true in config/webpacker.yml
Improve this answer
4
  • 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"; ???
    – user12073145
    CommentedSep 16, 2019 at 12:41
  • @JoanBuan Yes you can import sytle files. I updated the answer.
    – demir
    CommentedSep 16, 2019 at 12:53
  • 2
    @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
    – Lyzard Kyng
    CommentedSep 17, 2019 at 11:59
  • @LyzardKyng I assumed stylesheet_pack_tag helper was added. I'il update the answer.
    – demir
    CommentedSep 17, 2019 at 12:25