Мы недавно обновились от звездочек до веб-пакета, но я изо всех сил пытаюсь обновить библиотеку bootstrap-tokenfield - PullRequest
Новая
       28

Мы недавно обновились от звездочек до веб-пакета, но я изо всех сил пытаюсь обновить библиотеку bootstrap-tokenfield

0 голосов
/ 01 апреля 2019

Недавно мы изменили наше приложение rails с sprockets на webpack, и все, похоже, отлично портировалось, за исключением bootstrap-tokenfield. На сервере среды разработки написано, что все скомпилировано, но поле токенов не отображается должным образом.

Я попытался изменить местоположение / имя соответствующего css и попытался добавить библиотеку JS к плагинам среды, но безрезультатно.

environment.js 

// for loading css ...
const merge = require('webpack-merge')
const myCssLoaderOptions = {
  modules: true,
  sourceMap: true,
  localIdentName: '[name]__[local]___[hash:base64:5]'
}
const CSSLoader = environment.loaders.get('sass').use.find(el => el.loader === 'css-loader')
CSSLoader.options = merge(CSSLoader.options, myCssLoaderOptions)


const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}));

module.exports = environment

application.js 

import Turbolinks from 'turbolinks';
import 'bootstrap/dist/js/bootstrap';
import 'trix';
import 'chosen-js';
import '@coreui/coreui';
import 'jquery-ui';
import 'bootstrap-tokenfield'

Rails.start();
Turbolinks.start();

$(document).ready(function(){

    $('form').on('click', '.remove_record', function(event) {
        $(this).prev('input[type=hidden]').val('1');
        $(this).closest('tr').hide();
        return event.preventDefault();
      });

    $('form').on('click', '.add_fields', function(event) {
      var regexp, time;
      time = new Date().getTime();
      regexp = new RegExp($(this).data('id'), 'g');
      $('.fields').append($(this).data('fields').replace(regexp, time));
      return event.preventDefault();
    });

  });


  $(document).on('click', "tr[data-link]", function(){
    window.location = $(this).data("link")
  });

   $(document).on('turbolinks:load', function() {
    $('.chosen-select').chosen({
      disable_search_threshold: 10, 
      width: '140px'
    })

    $('.chosen-select-form').chosen({
      disable_search_threshold: 7, 
      width: '100%'
    })

    $('[data-toggle="tooltip"]').tooltip()
  })

application.scss (все еще компилируется звездочками) 

/*

*= require_tree .
*= require chosen
*= require jquery-ui
*= require bootstrap-tokenfield
//*= require trix 

 *
 */

 // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap";
@import "font-awesome";
@import '@coreui/coreui/dist/css/coreui.min';

Я ожидаю, что представления со встроенным токеном отображают входные данные токенного поля, но в настоящее время они просто показывают обычный текстовый ввод.

1 Ответ

0 голосов
/ 01 апреля 2019

Я просто включил библиотеки jquery ui и bootstrap tokenfield прямо на страницу layout.html.erb, и это было исправлено.

...