我有一个带Webpacker的Rails 5应用程序。我正在尝试使用webpack将我的CSS文件和JS文件捆绑在一起。在我的JavaScript/pack中，我同时有一个application.js和application.scss文件。我将Bootstrap作为我的软件包的依赖项添加了。在application.js中我有：
console.log('Hello World from Webpacker')
import 'jquery'
import 'bootstrap/dist/js/bootstrap';
在application.scss中我有：
@import '~bootstrap/dist/css/bootstrap';
我无法同时弄清楚如何同时导入SCSS和JS。在application.html.erb中我有两个
<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application' %>
但是，曾经是JS或CSS已加载，但绝不是两者！
我想WebPack配置了一个问题，但我无法弄清楚。我如何正确配置WebPack以使用Rails 5应用程序并正确捆绑CSS和JS。
这是该项目的链接：
https://github.com/davidgeismar/visitors
用于将webpacker stylesheet加载到您的导轨应用程序中，首先应该删除应用程序/javascript/packs/application.scss文件。因为WebPacker将StylesHeet代码与StylesHeet扩展名相同的JS文件名分开。
示例 - 您的WebPacker主JS文件是-App/javascript/packs/application.js，您应该在其中导入所有CSS和JS文件。因此，您不需要保留app/javascript/packs/application.scss文件，但是webpacker从从application.js.js.
中提取代码的application.css文件。这是您的Rails App GitHub存储库中修改的代码。首先删除app/javascript/packs/application.scss
#app/javascript/packs/application.js
console.log('Hello World from Webpacker')
import 'jquery'
import 'bootstrap/dist/js/bootstrap';
//import 'bootstrap/dist/css/bootstrap.css';
// Added js code for checking webpacker is working fine or not.
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#content-from-webpacker').innerHTML = '<p class="h1">h1. Bootstrap heading</p><h1 class="display-1">Display 1</h1>'
})
这是用于加载WebPacker的视图代码。
#app/views/layout/application.html.erb
<body>
<%= render 'shared/navbar' %>
<%= yield %>
<!-- This id(content-from-webpacker) is used for displaying content from webpacker -->
<div id="content-from-webpacker"></div>
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>
<%= javascript_include_tag 'application' %>
</body>
我希望它应该起作用。我也对您的github存储库进行了更改，并发送了一个拉请请求。