symfony 4 bootstrap 和带有 webpack encore 的 tablesorter

Question

我尝试将 tablesorter 集成到我的 symfony 4 项目中。在启动 'yarn encore dev' 命令时，我收到消息

CssSyntaxError

(3:1) Unclosed bracket

  1 | /*! tablesorter (FORK) - updated 2020-03-03 (v2.31.3)*/
  2 | /* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
> 3 | (function(factory){if (typeof define === 'function' && define.amd){define(['jquery'], factory);} else if (typeof module === 'object' && typeof module.exports === 'object'){module.exports = factory(require('jquery'));} else {factory(jQuery);}}(function(jQuery) {
    | ^
  4 | /*! TableSorter (FORK) v2.31.3 *//*
  5 | * Client-side table sorting with ease!

我在 'jquery.tablesorter'

的不同版本中收到类似的错误消息

我通过以下方式导入 tablesorter :

在app.js

import '../../node_modules/tablesorter/dist/js/jquery.tablesorter.min.js';
import '../../node_modules/tablesorter/dist/js/jquery.tablesorter.widgets.js';
import '../../node_modules/tablesorter/dist/js/extras/jquery.tablesorter.pager.min.js';

在app.css

@import "../../node_modules/tablesorter";

Js 脚本已加载但未加载 css 部分

你能帮我吗？谢谢

Answer 1

我不知道你为什么在“yarn encore dev”上收到错误消息，但我会删除 node_modules 并重新安装。

现在您的“css 未加载”。我没有看到您没有在 app.js 中导入您的“app.css”。添加如下：

import 'path_to_file/app.css';

并在树枝中使用：

<head>
    <title>Example</title>
    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
    {% endblock %}
</head>

symfony 4 bootstrap 和带有 webpack encore 的 tablesorter

symfony 4 bootstrap and tablesorter with webpack encore

bootstrap-4

symfony4

tablesorter

webpack-encore