Rails6에 Webpack에서 jQuery와 Bootstrap을 도입하는 방법
소개
Rails6부터 Webpack이 표준으로 도입되었습니다.
이에 따라 Bootstrap과 jQuery의 도입 방법이 바뀌었으므로 절차를 정리했습니다.
설치
다음 명령으로 설치합니다.
성공적으로 설치되었는지
package.json
에서 확인할 수 있습니다.터미널
$ yarn add bootstrap jquery popper.js
Bootstrap 및 jQuery 도입
다음을 추가합니다.
require("jquery")
import 'bootstrap'
import '../src/application.scss'
app/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.
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery") //追加
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
import 'bootstrap' //追加
import '../src/application.scss' //追加
여기에서 -- 여기까지를 아래에 추가합니다.
config/webpack/evironment.js
const { environment } = require('@rails/webpacker')
//ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
//ここまで追加
module.exports = environment
app/javascript 아래에 src를 만들고 그 안에 application.scss를 만듭니다.
app/javascript/src/application.scss
@import '~bootstrap/scss/bootstrap'; //追加
동작 확인
올바르게 도입되었는지 확인하기 위해 다음 파일을 만들었습니다.
demo.html.erb
<div class="container">
<h1>Bootstrap</h1>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
<h1>jQuery</h1>
<p id="hoge">赤色になるよ</p>
<script>
$("#hoge").css("color","red")
</script>
</div>
<도입 전>
<도입 후>
올바르게 도입되면 버튼이 파란색으로 바뀌고 (Bootstrap) 문자가 빨간색으로 바뀝니다. (jQuery)
결론
이상으로 도입은 완료입니다!!
Reference
이 문제에 관하여(Rails6에 Webpack에서 jQuery와 Bootstrap을 도입하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shungo_m/items/53bcae18a740495d1eb3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)