rails 5 webpack 4处理css文件
我有一个带有webpacker的rails 5应用程序。我正在尝试使用webpack来捆绑我的css文件和js文件。在我的javascripts/packs中，我既有application.js文件，也有application.scss文件。我将bootstrap作为依赖项添加到我的package.json中，现在正在尝试将bootstrap css和js导入到我的rails应用程序中。在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，以便与我的Rails5应用程序一起工作，并正确捆绑我的css和js。
以下是该项目的链接：
回答 1
Stack Overflow用户
发布于 2019-03-16 17:57:47
要将webpacker样式表加载到Rails应用程序中，首先应该删除app/javascript/packs/application.scss文件。因为webpacker使用样式表扩展名来分隔具有相同js文件名的样式表代码。
示例-你的webpacker的主要js文件是- app/javascript/packs/application.js，你应该在里面导入所有的css和js文件。所以你不需要保存app/javascript/packs/application.scss文件，但是webpacker会从application.js中提取代码生成一个application.css文件。
以下是rails应用程序github repo中修改后的代码。首先删除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存储库进行了此更改，并发送了一个拉取请求。
https://stackoverflow.com/questions/55191896
复制相似问题
腾讯云开发者
