[英]Rails 6.0.3.2 yarn add bootstrap jquery popper.js is not working and cannot use bootstrap tooltip
我正在使用 rails 6 版本6.0.3.2
以下是我设置引导程序 4 的所有步骤:
第 1 步: rails new test_tooltip
第 2 步: rails g controller welcome index
第 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>
第 4 步: yarn add bootstrap jquery popper.js
info All dependencies
├─ bootstrap@4.5.0
├─ jquery@3.5.1
└─ popper.js@1.16.1
第 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
第 6 步:app\javascript\packs\application.js
import "bootstrap"
第 7 步:app\assets\stylesheets\application.scss
@import "bootstrap/scss/bootstrap";
当我访问欢迎/索引页面时,虽然引导 css 警报有效,但工具提示不起作用,我在控制台中收到此错误:
Uncaught TypeError: $(...).tooltip is not a function
您可以尝试安装 rails 6 版本6.0.3.2
并按照我的所有步骤操作,您会看到我的结果。 请帮我解决这个问题,我想使用引导程序的工具提示。
在我的例子中,我们使用的是 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;
只需将其添加到您的 application.js
require("jquery/src/jquery")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.