我应该如何使用 Rails 6 和 Webpack 导入 Bootstrap？答案

【问题标题】：How should I import Bootstrap with Rails 6 and Webpack?我应该如何使用 Rails 6 和 Webpack 导入 Bootstrap？
【发布时间】：2020-04-26 10:08:04
【问题描述】：

我通过将application.css 重命名为application.scss 将其切换为SCSS，然后通过运行安装引导程序：

yarn add bootstrap

为了导入 Boostrap 的 scss，我补充说：

@import "~bootstrap/scss/bootstrap";

到我的application.scss 的顶部，但我收到了这个错误：

Started GET "/" for 127.0.0.1 at 2020-04-26 10:56:23 +0100
Processing by HomeController#index as HTML
  Rendering home/index.html.haml within layouts/application
  Rendered home/index.html.haml within layouts/application (Duration: 0.1ms | Allocations: 17)
Completed 500 Internal Server Error in 19ms (ActiveRecord: 0.0ms | Allocations: 3752)



ActionView::Template::Error (Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.scss.
        on line 1:1 of app/assets/stylesheets/application.scss
>> @import "~bootstrap/scss/bootstrap.scss";

   ^
):
     6:     %title Project X
     7:     = csrf_meta_tags
     8:     = csp_meta_tag
     9:     = stylesheet_link_tag "application", media: "all", "data-turbolinks-track": "reload"
    10:     = javascript_pack_tag "application", "data-turbolinks-track": "reload"
    11:   %body
    12:     =link_to "Project X", root_url

app/assets/stylesheets/application.scss:1
app/views/layouts/application.html.haml:9

我也试过了：

@import "~bootstrap/scss/bootstrap.scss";

和：

@import "~bootstrap";

我错过了什么？

【问题讨论】：

标签： webpack ruby-on-rails-6

【解决方案1】：

问题是在 Rails 6.0.2.2 上，默认情况下，WebPack 用于处理 JavaScript，但资产管道用于处理样式表。

我将样式表放在javascript/src/application.scss 并使用

= stylesheet_pack_tag "application", media: "all", "data-turbolinks-track": "reload"

和

import "../src/application.scss"

遵循 Rails WebPacker 文档中的说明：https://github.com/rails/webpacker/tree/v5.1.1#usage

【讨论】：