Question

我知道我可以使用引导程序，因为此网站上的容器/行都在工作，但是由于某种原因，它看起来不像JS在Bootstrap上工作。

我在app> assets> javascripts> application.js

中进行了以下设置

//= require rails-ujs
//= require rails-validator

在app> javascript> packs> application.js之内

import "babel-polyfill/dist/polyfill.js";
import nav from "./nav";

app> javascript> packs> styles> bootstrap.scss

@import '~bootstrap/dist/css/bootstrap';
@import '~bootstrap/scss/_functions';
@import '~bootstrap/scss/_variables';

config> webpack> environment.js

const environment = require('./environment')
environment.plugins.get("UglifyJs").options.uglifyOptions.ecma = 5
module.exports = environment.toWebpackConfig()

Gemfile.lock

bootstrap-sass (3.3.7)
  autoprefixer-rails (>= 5.2.1)
  sass (>= 3.3.4)

我不知道需要更新什么才能使JS真正起作用。

我尝试使用以下方式更新app> javascript> application.js：

// JS libraries
import "jquery"
import "jquery-ujs"
import "bootstrap"

这将导致未捕获的错误：找不到模块“ jquery-ujs”，并且发生了未捕获的ReferenceError：应用未定义。

我尝试通过以下方式添加到app> javascript> application.js：

import 'bootstrap/dist/js/bootstrap';
import Rails from 'rails-ujs';
Rails.start();

然后在我的config> webpacker> 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;

最后出现bootstrap.js：7未捕获错误：找不到模块“ popper.js”和home.js：4未捕获ReferenceError：未定义应用程序

Answer 1

也许您可以尝试在项目中添加popper gem。如果我记得，它不会自动包含在内。 https://github.com/glebm/popper_js-rubygem

带Webpacker的Rails Bootstrap 3-下拉菜单不起作用

1 个答案: