javascript - 当我在 webpack 配置中添加 css 加载器时，tinymce 突然停止工作

Question

我通过从https://github.com/DMRPRoadmap/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',
  });

还有这些，因为 webpack 需要知道我需要的代码：

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

这个项目只使用sass？所以我在 webpack config ( lib/assets/webpack.config.js) 中添加了 css 加载器：

  {
    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 文本区域框突然不再工作了。

我不知道为什么会发生这种情况，也不知道从哪里开始调试。我哪里做错了？

谢谢！

标签： javascriptruby-on-railsnpmwebpacktinymce

Answer 1

原来在app/views/plans/_edit_details.html.erb文件中，我需要添加这两行：

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

代替：

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