如何在 Webpacker 中正确导入 JS 和 CSS 文件？

Question

I installed Webpacker gem into my Rails app and have difficulties to import JS and CSS files from assets folder to app/javascript/packs folder.

I'm mentioning that app/javascript/packs/application.js looks like this:

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

console.log('Hello World from Webpacker')

and it works properly(in console I get this "Hello World.." text.)

I tried to copy, for example jquery.slimmenu.js into packs folder and to include it like this:

//= require jquery.slimmenu.js

but it's not finding in console, there is just application.js and bunch of 404 not find JS and CSS files

Answer 1

your main.js file can be in any directory in app/javascript for example, create app/javascript/components then add in your application.js

import 'jquery'
require("../components/main");

then in your HTML add

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

and script from application.js must be loaded