Rails 6プロジェクトへのブートストラップ4の追加

あなたはほとんどの開発者のような場合は、おそらく仕事をたくさんしている.このため、スマート開発者は、彼らが少ないコードを書くようにツールを活用するように.
そして、bootstrapはちょうどそれをするツールです.このCSSフレームワークによって、私たちはすぐに、かなりまともに見えるページをむくことができます.
この短い記事では、ブートストラップ4をRailsプロジェクトに追加する方法を紹介します.これは以前のバージョンのブートストラップをRuby on Railsの他のバージョンに追加することとは少し異なります.
Railsプロジェクトをすでに開始したと仮定します.
次に、糸がインストールされていることを確認します.あなたがそれを持っていないならば、あなたは走らせることができます:

brew install yarn

次に、config/webpack/環境に移動する必要があります.JSファイルと次のコードを配置します

const webpack = require("webpack")


environment.plugins.append('Provide',

  new webpack.ProvidePlugin({

    $: 'jquery',

    jQuery: 'jquery',

    Popper: ['popper.js', 'default']

  })
)

設定/webpack/環境.JSは次のようになります.

const { environment } = require('@rails/webpacker')

const webpack = require("webpack")



environment.plugins.append("Provide", new webpack.ProvidePlugin({

  $: 'jquery',

  jQuery: 'jquery',

  Popper: ['popper.js', 'default']

}))

module.exports = environment

今、あなたのJavaScript/パック/アプリケーションに移動します.jsファイル.これは、ブートストラップのJSを使用するアプリケーションを知っているつもりですファイルです.次を追加します.

gem 'bootstrap'

あなたのJavaScript/パック/アプリケーション.JSは次のようになります.

// This file is automatically compiled by Webpack, along with any other files

// present in this directory. You're encouraged to place your actual application logic in

// a relevant structure within app/javascript and only use these pack files to reference

// that code so it'll be compiled.



import Rails from "@rails/ujs"

import Turbolinks from "turbolinks"

import * as ActiveStorage from "@rails/activestorage"

import "channels"

import 'bootstrap'

Rails.start()

Turbolinks.start()

あなたのアプリケーション/資産/スタイルシート/アプリケーションに移動します.CSSファイルとそれをアプリケーションにリネームします.次にscssを追加します.

@import "bootstrap/scss/bootstrap";
Your application.scss file should look like the following:
/*

 * This is a manifest file that'll be compiled into application.css, which will include all the files

 * listed below.

 *

 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's

 * vendor/assets/stylesheets directory can be referenced here using a relative path.

 *

 * You're free to add application-wide styles to this file and they'll appear at the bottom of the

 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS

 * files in this directory. Styles in this file should be added after the last require_* statement.

 * It is generally better to create a new file per style scope.

 *

 *= require_tree .

 *= require_self

 */

最後に、これら二つのコマンドを実行します.

yarn add [email protected] jquery popper.js

bundle install

これで、Rails 6プロジェクトにブートストラップ4をインストールする必要があります!
Web開発の詳細については、確認してください.