rails 5 webpack 4 处理 css 个文件

Question

我有一个带有 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 以使用我的 rails 5 应用程序并正确捆绑我的 css 和 js。

这是项目的link：

https://github.com/davidgeismar/Visitors

Answer 1

为了将 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 存储库中修改后的代码。首先删除 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 存储库进行了此更改并发送了拉取请求。

rails 5 webpack 4 处理 css 个文件

rails 5 webpack 4 handling css files

ruby-on-rails

webpacker