![](/img/trans.png)
[英]How can I change button class and fontawesome icon based on my database value 0 or 1 in laravel using jquery ajax?
[英]How can I use fontawesome icons in a laravel application using vite?
我已经使用 npm 安装了@fortawesome/fontawesome-free包。 最新的 Laravel 应用默认使用 vite。 我无法解决这个问题。 任何帮助将非常感激。 我的vite.config.js是
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
'resources/admin/css/app.css',
'resources/admin/js/app.js',
'resources/css/glide.css',
'resources/js/glide.js',
'resources/js/Sortable.js',
'resources/js/tinymce.js',
'resources/sass/app.scss',
'resources/admin/sass/app.scss',
]),
{
name: 'blade',
handleHotUpdate({ file, server }) {
if (file.endsWith('.blade.php')) {
server.ws.send({
type: 'full-reload',
path: '*',
});
}
},
},
viteStaticCopy({
targets: [
{
src: 'node_modules/@fortawesome/fontawesome-free/webfonts',
dest: '',
},
],
}),
],
});
我在app.scss中导入了 fontawesome scss 文件。 我的app.scss文件包含
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/brands";
@import "@fortawesome/fontawesome-free/scss/regular";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/v4-shims";
我尝试使用第三方库https://github.com/sapphi-red/vite-plugin-static-copy来复制 fontawesome 包的 webfonts。 还有比这更好的方法吗?
如果您不通过 npm 添加它,这很容易。 将整个 fontawesome 目录复制到资源目录(/resources/fontawesome)
中,然后在您的 scss 文件中声明变量,例如(假设您在 /resources/sass 中的文件中执行此操作:
$fa-font-path: '../fontawesome/webfonts';
并导入 fontawesome 文件:
@import '../fontawesome/scss/brands';
@import '../fontawesome/scss/solid';
@import '../fontawesome/scss/light';
@import '../fontawesome/scss/fontawesome';
构建脚本会将文件复制到您的/public/build/assets
目录并更改 url,开发脚本将从您的资源目录加载它们。
我通过首先安装 sass 预处理器解决了这个问题:
npm install -D sass
之后,我将所有 fontawesome scss文件导入到我的app.js文件中:
import './bootstrap';
import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
import '@fortawesome/fontawesome-free/scss/brands.scss';
import '@fortawesome/fontawesome-free/scss/regular.scss';
import '@fortawesome/fontawesome-free/scss/solid.scss';
import '@fortawesome/fontawesome-free/scss/v4-shims.scss';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.