使用vue3 + vite + ckeditor5配置后加载程序

Question

我正在将vue3项目从webpack迁移到vite。除了ckeditor，一切都进行得很顺利。在ck-编辑器中，有一个用于执行.css和.svg文件transpile的配置。https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html#configuring-vueconfigjs

我做了一个插件来做这个简单的过程，但它并不完美。

ckeditor.util.ts

const fileRegex = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
// https://vitejs.dev/guide/api-plugin.html#transforming-custom-file-types
// https://rollupjs.org/guide/en/#plugin-development
export default () => {
  return {
    name: "vite-ckeditor-svg-plugin",
    // https://rollupjs.org/guide/en/#transform
    transform(src, id) {
      if (fileRegex.test(id)) {
        // raw-loader
        src = fs.readFileSync(id, "utf8");
        const json = JSON.stringify(src)
          .replace(/\u2028/g, "\\u2028")
          .replace(/\u2029/g, "\\u2029");
        return {
          code: `export default ${json}`,
          map: { mappings: "" },
        };
      }
    },
    // https://rollupjs.org/guide/en/#generatebundle
    generateBundle(options, bundle) {
      for (const [filename, info] of Object.entries(bundle)) {
        if (fileRegex.test((info as AssetInfo).name)) {
          delete bundle[filename];
        }
      }
    },
  };
};

vite.config.js

import CkeditorUtil from "./src/utils/ckeditor.util";
// https://vitejs.dev/config/
export default defineConfig({
  ...
  plugins: [
    vue(),
    CkeditorUtil(),
  ]
  ...
})

并得到错误

Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
    @mixin icon {
    ^

我为解决这个问题所做的一切基本上都是https://tailwindcss.com/docs/using-with-preprocessors#nesting，安装postcss-mixins不起作用，最后尝试像这样做另一个插件。

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const fileRegex = /ckeditor5-[^/\\]+[/\\].+\.css$/;
export default () => {
  return {
    name: "vite-postcss-svg-plugin",
    transform(src, id) {
      if (fileRegex.test(id)) {
        src = fs.readFileSync(id, "utf8");
        // try to do like this but getPostCssConfig() is working with webpack  
        // so unable to call this with vite
        // postcssOptions: styles.getPostCssConfig( {
        //                themeImporter: {
        //                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
        //                },
        //                minify: true
        //           } )
        return {
          code: `export default ${json}`,
          map: { mappings: "" },
        };
      }
    },
  };
};

我想我错过了用于转换编辑器导入的.css文件的postcss-加载程序。什么是真正的问题，以及如何使它工作？

Answer 1

“‘vite plugin”是简单的“原始加载器”。我用它来解决.svg