0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Rails+WebpackerでBootstrap4を入れる方法

Posted at

背景

railsではBootstrapをwebpackerを使って入れるとのことだったので、試してみました。

やり方

Gemfileに追加

# webpacker
gem 'webpacker', '~> 4.0'

Dockerを使ってbuildし直す

ターミナルでwebpackerのインストール

$rails webpacker:install

yarnコマンドでjQueryやbootstrapをインストール

$yarn add jquery bootstrap popper.js

config/webpack/environment.jsに以下を追加

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

module.exports = environment

// ここから
  const webpack = require('webpack')
  environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery',
      Popper: ['popper.js', 'default']
    })
  }
// ここまで

app/javascript/stylesheets/application.scssを新規作成し、追加

@import '~bootstrap/scss/bootstrap';

app/javascript/packs/application.jsに以下を追加

  import 'bootstrap';
  import '../stylesheets/application';

app/views/layouts/application.html.erbに以下を追加

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

あとは、bootstrapのクラスを当ててみて、動作すればOKです。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?