我在我有一个相当大的问题工兵应用。我正在使用带有svelte-preprocess插件的汇总将我的scss转换为css：
const preprocess = sveltePreprocess({
scss: {
data: `@import '${join(process.cwd(), "src/styles/main.scss")}';`,
includePaths: ["node_modules", "src"],
},
postcss: {
plugins: [...],
},
});
在那之后，我想运行另一个预处理器，svelte-image来优化我的图像。这里的问题是，根据预处理器的设计，影响标记的预处理器将始终首先运行。这将导致我的图像预处理器失败，因为他将遇到scss文件，并且无法通过它们。
对我而言，最好的解决方案是编写自己的预处理器，进行样式处理，然后调用图像库。在文档中有一些示例，但我不太了解。如果我尝试这个例子：
const svelte = require('svelte/compiler');
const { code } = await svelte.preprocess(source, [
{
markup: () => myPreprocess()
style: () => imagePreprocess()
}
], {
filename: 'App.svelte' // Which file would that be for sapper?
});
我收到一个错误，指出来源不明。因此，有人可以向我指出正确的方向，如何正确地调用该特定的预处理器吗？或者也许是一个更好的解决方案;-)
我在解释如何做到这一点的过程中取得了进展，并意识到它将成为有用的工具。我创建了一个软件包来处理这个问题：svelte-sequential-preprocessor。
// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import seqPreprocessor from 'svelte-sequential-preprocessor'
import autoPreprocess from 'svelte-preprocess'
import image from 'svelte-image'
export default {
...,
plugins: [
svelte({
preprocess: seqPreprocessor([ autoPreprocess(), image() ])
})
]
}
文档中的预处理用法示例是将预处理器功能用作独立实用程序。要将自定义预处理器与汇总结合使用，您需要执行以下操作：
export default {
...,
plugins: [
svelte({
preprocess: {
markup: ({ content, filename }) => myPreprocess(content)
}
})
]
}
注意：传递给的内容markup()将是一个完整的苗条文件，以字符串表示。
但是，即使考虑到这一点，您的建议也不会以您描述的方式起作用。问题在于样式预处理器仅将样式作为内容获取。svelte-image需要得到的完整的Svelte组件markup()。
如果您进行了最后的调整，则可以使其生效。您可以尝试使用上面引用的库中的preprocess函数，而不是在不同的阶段调用预处理器，而可以在调用下一阶段之前强制每个预处理器运行所有阶段。可以在此处找到完整的示例，但这是逻辑的基本概述。
export default {
...,
plugins: [
svelte({
preprocess: {
markup: async ({ content, filename }) => {
const processed = await svelte.preprocess(content, autoPreprocess({ options }), { filename });
// Handle return value and repeat for other preprocessors
return {
code: ...,
dependencies: ...
};
}
})
]
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句