laravel 在Vite中使用Fontello字体

kyxcudwk  于 2023-04-07  发布在  其他
关注(0)|答案(1)|浏览(238)

我已经在webpack中使用Fontello图标几年了。现在我想在一个新的Laravel 10网站上使用相同的字体。Laravel 10附带了Vite,而不是使用webpack沿着混合。
我的问题是,当运行npm run build时,我看到每个名为(eot,woff和svg)的fontello字体文件的以下错误:
./font/icons.eot?37060991在/var/dev/icons/resources/sass/app中引用。scss在构建时没有解析,它将保持不变以便在运行时解析
然后图标就不会呈现在页面中。
在fontello/css/icons.css文件中,每个文件的URL以以下开头:
../font/icons。
我尝试了各种路径组合,比如../../fontello/font/,但似乎都不起作用。
我真的很想继续使用Fontello图标,主要是因为它们可以很容易地只加载我们实际使用的那些图标图像。我可以看到Vite是要走的路,至少在可预见的未来,特别是当使用Vue时。所以让Fontello图标工作是非常必要的。

e5nqia27

e5nqia271#

经过一番搜索,我找到了解决方案:
我在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提供的图标会按预期显示在页面上。

相关问题