Bootstrap + Rails 6 + webpacker - PullRequest
Новая
       10

Bootstrap + Rails 6 + webpacker

0 голосов
/ 30 января 2020

Получает эту ошибку: 

Uncaught TypeError: $(...).modal is not a function

Теперь, вот моя иерархия приложений: 

- app
  - assets
    - images
    - stylesheets
  - controllers
  - javascript
    - packs
      - theme.js
      - bootstrap_custom.js
    - stylesheets
      - bootstrap_custom.scss
      - theme.scss

Вот моя тема. js: 

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
import '../stylesheets/theme';

import "@fortawesome/fontawesome-free/js/all";
// import 'bootstrap/dist/js/bootstrap.bundle';

import './bootstrap_custom.js'

import 'jquery-storage-api/jquery.storageapi';
import 'tether/dist/js/tether';
// import 'underscore/underscore';
import _ from 'underscore/underscore';
import 'pace/pace';

import uiLoad from "theme/ui-load";

window._ = _;
window.$ = jQuery;

вот моя тема.s css: 

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import "~@fortawesome/fontawesome-free/scss/regular";
@import 'tether/dist/css/tether';
@import './bootstrap_custom.scss';

Теперь, в bootstrap_custom. js, я импортировал модальный js: 

import 'bootstrap/js/dist/alert'
import 'bootstrap/js/dist/button'
import 'bootstrap/js/dist/carousel'
import 'bootstrap/js/dist/collapse'
import 'bootstrap/js/dist/dropdown'
import 'bootstrap/js/dist/index'
import 'bootstrap/js/dist/modal'
import 'bootstrap/js/dist/popover'
import 'bootstrap/js/dist/scrollspy'
import 'bootstrap/js/dist/tab'
import 'bootstrap/js/dist/toast'
import 'bootstrap/js/dist/tooltip'
import 'bootstrap/js/dist/util'

и аналогично для bootstrap_custom .s css: 

@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/_mixins.scss';
@import '~bootstrap/scss/_root.scss';
@import '~bootstrap/scss/_reboot.scss';
@import '~bootstrap/scss/_type.scss';
@import '~bootstrap/scss/_alert.scss';
@import '~bootstrap/scss/_badge';
@import '~bootstrap/scss/_breadcrumb';
@import '~bootstrap/scss/_button-group';
@import '~bootstrap/scss/_buttons';
@import '~bootstrap/scss/_buttons.scss';
@import '~bootstrap/scss/_card.scss';
@import '~bootstrap/scss/_carousel.scss';
@import '~bootstrap/scss/_close.scss';
@import '~bootstrap/scss/_code.scss';
@import '~bootstrap/scss/_custom-forms.scss';
@import '~bootstrap/scss/_dropdown.scss';
@import '~bootstrap/scss/_forms.scss';
@import '~bootstrap/scss/_grid.scss';
@import '~bootstrap/scss/_images.scss';
@import '~bootstrap/scss/_input-group.scss';
@import '~bootstrap/scss/_jumbotron.scss';
@import '~bootstrap/scss/_list-group.scss';
@import '~bootstrap/scss/_media.scss';
@import '~bootstrap/scss/_modal.scss';
@import '~bootstrap/scss/_nav.scss';
@import '~bootstrap/scss/_navbar.scss';
@import '~bootstrap/scss/_pagination.scss';
@import '~bootstrap/scss/_popover.scss';
@import '~bootstrap/scss/_print.scss';
@import '~bootstrap/scss/_progress.scss';
@import '~bootstrap/scss/_spinners.scss';
@import '~bootstrap/scss/_tables.scss';
@import '~bootstrap/scss/_toasts.scss';
@import '~bootstrap/scss/_tooltip.scss';
@import '~bootstrap/scss/_transitions.scss';
@import '~bootstrap/scss/_utilities.scss';

Я не думаю, что существует какая-либо проблема в bootstrap модальном js, поскольку jquery уже определено в среде wepacker. js

...