我应该如何导入带有Rails6和Webpack的Bootstrap

Question

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

yarn add bootstrap

为了进口Boostrap的scs，我补充道：

@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";

我错过了什么？

Answer 1

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

通过将样式表放在javascript/src/application.scss中并使用，我开始对所有内容使用WebPack

= 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

Answer 2

我在项目中遇到了同样的错误，但通过运行以下命令修复了它：

yarn添加bootstrapjquery@popperjs/core