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

Question

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

我制作了一个插件来完成类似的过程，但它并不完美。

cketditor.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，安装postss-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: "" },
};
}
},
};
};

我想我缺少了postpass加载程序来传输编辑器导入的.css文件。真正的问题是什么？如何使其发挥作用？

Answer 1

"vite-plugin-raw"类似于"raw-loader"。我用它来解决.svg