amcharts4 的破碎样式

Question

我正在尝试像这样在 vue 组件中导入 amcharts 的部分：

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

但它破坏了站点的样式：最终 css 文件仅包含 /* (ignored) *//* (ignored) *//* (ignored) */ 而不是实际样式。我发现 thread on the github 有同样的问题，但它接近 w/o 任何分辨率。

任何人都可以帮我找出这种行为的原因和实际修复方法吗？

amcharts: 4.10.5; Webpack: 4.43.0

Answer 1

所以，我找到了解决方案。

您需要删除那些生成的文件（如果它们已创建）：

public/vendors~xlsx.js
public/xlsx.js
public/vendors~pdfmake.js
public/vendors~canvg.js

将其添加到 webpack 配置中（对于 laravel-mix，将其添加到 mix.webpackConfig({...}) 结构中）：

{
  externals: function (context, request, callback) {
    if (/xlsx|canvg|pdfmake/.test(request)) {
      return callback(null, "commonjs " + request);
    }
    callback();
  }
}

更多详情是here。

amcharts4 的破碎样式

Broken styles with amcharts4

amcharts

laravel-mix

amcharts4