使用Fontello字体与Vite

Question

我已经在webpack中使用Fontello图标好几年了。现在我想在一个新的Laravel 10网站上使用相同的字体。Laravel 10使用了Vite，而不是使用webpack和mix。

我的问题是，当运行npm run build时，我看到每个fontello字体文件(eot, woff和svg)都出现以下错误:

。/字体/icons.eot吗?/var/dev/icons/resources/sass/app中引用的37060991。SCSS没有在构建时解决，它将保持不变，在运行时解决

然后图标不会在页面中呈现。

在fontello/css/icons.css文件中，每个文件的URL以:

开头. ./字体/图标。

我尝试过各种路径组合，比如…/…/fontello/font/，但似乎没有任何工作

我真的很想继续使用Fontello图标，主要是因为它们可以很容易地加载我们实际使用的那些图标图像。我可以看到，至少在可预见的未来，尤其是在使用Vue时，Vite是一种发展方向。所以让Fontello图标工作是非常必要的。

Answer 1

经过一番额外的搜索，我找到了解决方案:

我给vite.config.js文件添加了一个别名:

export default defineConfig({
resolve: {
alias: [{
// this alias it to allow us to include fontello icons
find: '../font',
replacement: path.resolve(__dirname, 'resources/sass/fontello/font'),
}],
},
};

一定要在顶部加上这一行:

import path from 'path';

现在'npm run build'运行时没有任何警告，并且fontello提供的图标按预期出现在页面上。