tinymce внезапно перестает работать, когда я добавляю загрузчик css в конфигурацию webpack

Question

Я запускаю свое приложение, клонируя код из https://github.com/DMPRoadmap/roadmap

В этом проекте используются webpack и npm.

Я хочу использовать select2, поэтому я сделал npm install select 2 в его каталоге lib/assets

Я хочу добавить поле поиска с несколькими вариантами выбора на страницу сведений о моем проекте (app/views/plans/_edit_details.html.erb), поэтому я добавил код, подобный следующему:

      <%= f.select(:my_options,
         options_for_select({first_option: '123'}, ['123']),
         {},
         { id: 'select-field',
           class: 'form-control',
           multiple: 'multiple' }) %>

и добавил их к соответствующемуФайл JavaScript (lib/assets/javascripts/views/plans/edit_details.js):

  // Set up Select2 for the multi select search field
  $('#select-field').select2({
    placeholder: 'Please enter text',
  });

, а также эти файлы, потому что веб-пакету нужно знать нужный мне код:

import 'select2/dist/js/select2';
import 'select2/dist/css/select2.css';

В этом проекте используется только sass?поэтому я добавил загрузчик css в конфигурацию webpack (lib/assets/webpack.config.js):

  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      presets: ['es2015'],
    },
  },
  // above is old code, below is new code
  {
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader'],
  },

Теперь (после того момента, когда я добавил новый загрузчик css), поиск с множественным выбором работает, но текстовая область tinymceокно в приложении внезапно перестает работать.

Я не знаю, почему это происходит, и не знаю, с чего начать отладку.Где я сделал не так?

Спасибо!

Answer 1

Получается в app/views/plans/_edit_details.html.erb файле, мне нужно добавить эти 2 строки:

import 'jquery-ui/ui/widgets/autocomplete';
import 'select2';

вместо:

import 'select2/dist/js/select2';
import 'select2/dist/css/select2.css';