Как мне импортировать Bootstrap с Rails 6 и Webpack? - PullRequest
1 голос
/ 26 апреля 2020

Я переключил application.css на S CSS, переименовав его в application.scss, затем установил bootstrap, запустив:

yarn add bootstrap

и импортировал Boostrap s css, я добавил:

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

Что мне не хватает?

1 Ответ

1 голос
/ 26 апреля 2020

Проблема заключалась в том, что в Rails 6.0.2.2 по умолчанию WebPack используется для обработки JavaScript, а конвейер ресурсов - для обработки таблиц стилей.

Я перешел к использованию WebPack для всего, разместив свои таблицы стилей в 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

...