当前位置 : 主页 > 网页制作 > Bootstarp >

Rails 用Webpack安装Bootstrap。

来源:互联网 收集:自由互联 发布时间:2021-06-12
Rails6将默认使用webpack代替asset: 本文讲述如何自己配置。 参考: https://getbootstrap.com/docs/4.1/getting-started/webpack/ https://gorails.com/episodes/how-to-use-bootstrap-with-webpack-and-rails?autoplay=1 步骤: 安

Rails6将默认使用webpack代替asset:

本文讲述如何自己配置。

参考:

https://getbootstrap.com/docs/4.1/getting-started/webpack/

https://gorails.com/episodes/how-to-use-bootstrap-with-webpack-and-rails?autoplay=1

 

步骤:

安装:

//后两个是依赖
yarn add bootstrap jquery popper.js

 

配置:

#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
#app/javascript/packs/application.js添加
import ‘bootstrap‘
import ‘../stylesheets/application‘

document.addEventListener(‘turbolinks:load‘, ()=>{
  $(‘[data-toggle="tooltip"]‘).tooltip()
  $(‘[data-toggle="popover"]‘).popover()
})

#新建app/javascript/stylesheets/application.scss。
@import "~bootstrap/scss/bootstrap";

完成配置!可以使用Bootrap4了。

网友评论