svgo配置不生效

[Jesuiswkai]

4.x版本把svg默认data改成了base64，我改了svg的配置也没有生效。

[fz6m]

给一个复现看看。

[Jeff-Tian]

Hi 我也碰到怀疑是“同样”的问题，我在 umi 中集成 ckeditor5，toolbar 显示不出来，原因是 svg 被强行转化成了base64，并且没有 viewBox 属性导致的。尝试通过 svgo 配置 unenc，无效。请大佬们帮忙看看什么原因？

复现仓库：https://github.com/JeffTrain/umi-ckeditor5

yarn && yarn dev 即可复现。

正常结果

（不用 umi4，用 umi3 或者 cra，都可以正常显示 toolbar）

[fz6m]

项目里对 webpack 的改写太多了，hack 了太多逻辑，难免会有匹配出错的问题或者没考虑到的情况，需要花费很多时间，没法看，如有问题，需要一个最小的复现。

[Jeff-Tian]

感谢大佬回复！我重新复现了一下，没有任何额外 hack，代码提交到了 https://github.com/orgs/JeffTrain/packages?repo_name=umijs-ckeditor5。

• 先创建 umi 项目： pnpm dlx create-umi@latest

pnpm dlx create-umi@latest
 WARN  GET https://r.cnpmjs.org/glob-parent error (ETIMEDOUT). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://r.cnpmjs.org/on-exit-leak-free error (ETIMEDOUT). Will retry in 10 seconds. 2 retries left.
Packages: +39
+++++++++++++++++++++++++++++++++++++++
Progress: resolved 40, reused 38, downloaded 1, added 39, done
┌   create-umi
│
○  Pick Umi App Template
│  Ant Design Pro
│
○  Pick Npm Client
│  pnpm
│
○  Pick Npm Registry
│  taobao
│
└  You're all set!

• 然后在 package.json 里添加 ckeditor 依赖，pnpm install && pnpm dev
• 接着，在打开的浏览器里打开开发者工具，可以看到 CKEditor 尝试初始化 UI，并报错。是尝试获取 viewbox 时，得到了一个 base64 并且没有 viewbox 属性的 content：
  

[fz6m]

  pnpm add -D postcss-loader style-loader css-loader

// .umirc.ts

  chainWebpack(config) {
    const { styles } = require('@ckeditor/ckeditor5-dev-utils');
    const svgReg = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
    const cssReg = /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/;
    config.module.rule('cke5-svg').test(svgReg).type(
      // raw-loader
      'asset/source',
    );
    // svg exclude
    ['svg', 'svgr'].forEach((rule) => {
      config.module.rule(rule).exclude.add(svgReg);
    });
    // css rule
    config.module
      .rule('cke5-css')
      .test(cssReg)
      .use('style-loader')
      .loader(require.resolve('style-loader'))
      .end()
      .use('css-loader')
      .loader(require.resolve('css-loader'))
      .end()
      .use('postcss-loader')
      .loader(require.resolve('postcss-loader'))
      .options({
        postcssOptions: styles.getPostCssConfig({
          themeImporter: {
            themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
          },
          minify: true,
        }),
      });
    // css exclude
    config.module.rule('css').exclude.add(cssReg);
    // assets exclude
    config.module
      .rule('asset')
      .oneOf('fallback')
      .exclude.add(svgReg)
      .add(cssReg);
  },

[dujun-bot]

你好，非常感谢能协助处理，你这个配置我试了，依然存在问题。项目地址为 https://gitee.com/xulongchang/umi-ckeditor.git ， .umirc.ts已经改为你这个配置。错误现象为，yarn start后，访问网站，svg已经被编译为了base64字符串，在开发者工具搜索 bold.svg 后，对应索索结果打断点可以看到。ckeditor官方给了一个示例，是基于react-cli脚手架搭建，编译后就可以正常访问，项目地址为：
https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/react.html#create-react-app 被这个问题折腾了2周了，期待能帮忙解决。
另外我本想用umi 3x测试是否正常，用来排除umi的问题，结果目前umi 3x yarn start时，会编译报错，看了一下是相关模块问题，看有没有计划解决？

[Jeff-Tian]

umi3 没有这个问题，我这里做了一个 demo： https://github.com/Jeff-Tian/umi-ckeditor5 。

[Jeff-Tian]

  pnpm add -D postcss-loader style-loader css-loader

// .umirc.ts

  chainWebpack(config) {
    const { styles } = require('@ckeditor/ckeditor5-dev-utils');
    const svgReg = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
    const cssReg = /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/;
    config.module.rule('cke5-svg').test(svgReg).type(
      // raw-loader
      'asset/source',
    );
    // svg exclude
    ['svg', 'svgr'].forEach((rule) => {
      config.module.rule(rule).exclude.add(svgReg);
    });
    // css rule
    config.module
      .rule('cke5-css')
      .test(cssReg)
      .use('style-loader')
      .loader(require.resolve('style-loader'))
      .end()
      .use('css-loader')
      .loader(require.resolve('css-loader'))
      .end()
      .use('postcss-loader')
      .loader(require.resolve('postcss-loader'))
      .options({
        postcssOptions: styles.getPostCssConfig({
          themeImporter: {
            themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
          },
          minify: true,
        }),
      });
    // css exclude
    config.module.rule('css').exclude.add(cssReg);
    // assets exclude
    config.module
      .rule('asset')
      .oneOf('fallback')
      .exclude.add(svgReg)
      .add(cssReg);
  },

感谢大佬的回复，应用了这个改动，svg 依然是被优化成了 base64。提交见： https://github.com/JeffTrain/umijs-ckeditor5/commit/956a61e94246463b6a828731e9eb6c66622529be

[fz6m]

你说的 svg 是哪来的，我在你这个项目里配置了上面我贴的配置，之后可以正常启动项目运行：

[Jeff-Tian]

感谢大佬！我将本地的 pnpm 从 6.11.0 升级到→ 8.9.2 (pnpm add -g pnpm ) ，然后重新 pnpm i 后，真的好了！ 看来是本地有些依赖的版本的问题（https://github.com/JeffTrain/umijs-ckeditor5/commit/db3e85e13b219264cae1bcdadd6344e05dcb1a24 ）？

不过 toolbar 上的 svg 现在正常显示了，非常感谢！

[LoveRecall]

@fz6m 按照你的配置，编辑器出来了，可是默认样式没有了，我看了是完全没有加载出来，而不是被其他css覆盖了

[fz6m]

如有问题，开一个新的 issue ，需要给一个最小复现帮助排查问题。