[英]Rails 6.0.3.2 yarn add bootstrap jquery popper.js is not working and cannot use bootstrap tooltip
I am using rails 6 version 6.0.3.2
我正在使用 rails 6 版本6.0.3.2
Here are all my steps for setup bootstrap 4:以下是我设置引导程序 4 的所有步骤:
step 1: rails new test_tooltip
第 1 步: rails new test_tooltip
step 2: rails g controller welcome index
第 2 步: rails g controller welcome index
step 3: in welcome/index.html.erb第 3 步:在 Welcome/index.html.erb
<div class="container">
<h3>Tooltip Example</h3>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<script>
$( document ).on('turbolinks:load', function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
step 4: yarn add bootstrap jquery popper.js
第 4 步: yarn add bootstrap jquery popper.js
info All dependencies
├─ bootstrap@4.5.0
├─ jquery@3.5.1
└─ popper.js@1.16.1
step 5: config\webpack\environment.js第 5 步:配置\webpack\environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery', // $: 'jquery', does not work!
jQuery: 'jquery/src/jquery', // jQuery: 'jquery', does not work!
Popper: ['popper.js', 'default']
})
)
module.exports = environment
step 6: app\javascript\packs\application.js第 6 步:app\javascript\packs\application.js
import "bootstrap"
step 7: app\assets\stylesheets\application.scss第 7 步:app\assets\stylesheets\application.scss
@import "bootstrap/scss/bootstrap";
When I visit the welcome/index page, although bootstrap css alert works but tooltip does not work and I get this error in console:当我访问欢迎/索引页面时,虽然引导 css 警报有效,但工具提示不起作用,我在控制台中收到此错误:
Uncaught TypeError: $(...).tooltip is not a function
You can try install rails 6 version 6.0.3.2
and follow all my steps and you'll see exactly my result.您可以尝试安装 rails 6 版本6.0.3.2
并按照我的所有步骤操作,您会看到我的结果。 Please help me fix this, I want to use tooltip of bootstrap.请帮我解决这个问题,我想使用引导程序的工具提示。
In my case, we were using popperjs/core so ended up with this webpack configurations:在我的例子中,我们使用的是 popperjs/core 所以最终得到了这个 webpack 配置:
const { environment } = require('@rails/webpacker');
const { VueLoaderPlugin } = require('vue-loader');
const vue = require('./loaders/vue');
const webpack = require('webpack');
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
environment.loaders.prepend('vue', vue);
environment.plugins.append('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
cash: "cash-dom",
Popper: ['@popperjs/core']
})
);
module.exports = environment;
Just add this to your application.js只需将其添加到您的 application.js
require("jquery/src/jquery")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.