Rails 6 프로젝트에 부트스트랩 4 추가

대부분의 개발자와 같다면 해야 할 일이 많을 것입니다. 이 때문에 똑똑한 개발자는 코드를 적게 작성할 수 있는 도구를 선호합니다.

부트스트랩은 바로 그런 일을 하는 도구입니다. 이 CSS 프레임워크를 사용하면 꽤 괜찮아 보이는 페이지를 빠르게 만들 수 있습니다.

이 짧은 기사에서는 Rails 프로젝트에 부트스트랩 4를 추가하는 방법을 보여드리겠습니다. 이는 이전 버전의 Bootstrap을 다른 버전의 Ruby on Rails에 추가하는 것과 약간 다릅니다.
이미 Rails 프로젝트를 시작했다고 가정하겠습니다.

다음으로 Yarn이 설치되어 있는지 확인하십시오. 없는 경우 다음을 실행할 수 있습니다.

brew install yarn

다음으로 config/webpack/environment.js 파일로 이동하여 다음 코드를 입력해야 합니다.

const webpack = require("webpack")


environment.plugins.append('Provide',

  new webpack.ProvidePlugin({

    $: 'jquery',

    jQuery: 'jquery',

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

  })
)

config/webpack/environment.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/packs/application.js 파일로 이동합니다. 이것은 부트스트랩의 JS를 사용하도록 앱에 알리는 파일입니다. 다음을 추가합니다.

gem 'bootstrap'

javascript/packs/application.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()

app/assets/stylesheets/application.css 파일로 이동하여 이름을 applications.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가 설치되어 있어야 합니다!

웹 개발에 대해 자세히 알아보려면 .