Laravel 9（Vite环境）安装Font Awesome方法咨询（无CDN）

步骤1：安装Font Awesome包 #

在项目根目录下运行npm命令安装本地包：

npm install @fortawesome/fontawesome-free --save-dev

步骤2：导入Font Awesome资源 #

因为不使用预处理器，直接在你的主资源文件中导入样式和可选的JS：

• 方式一：在resources/js/app.js中导入

// 导入Font Awesome核心样式
import '@fortawesome/fontawesome-free/css/all.css';
// 若需要动态图标、动画等JS功能，追加导入
import '@fortawesome/fontawesome-free/js/all.js';

• 方式二：在resources/css/app.css中导入

@import '@fortawesome/fontawesome-free/css/all.css';

步骤3：编译资源 #

Vite会自动处理依赖，运行对应命令编译：

• 开发环境（实时预览）：

npm run dev

• 生产/离线演示环境（生成静态资源）：

npm run build

步骤4：在Blade模板中引入资源 #

使用Laravel内置的@vite指令自动加载编译后的资源，在模板的<head>或<body>末尾添加：

@vite(['resources/js/app.js', 'resources/css/app.css'])

或者手动引入编译后的文件（路径以实际build目录为准）：

<link rel="stylesheet" href="{{ asset('build/assets/app-xxxxxxxx.css') }}">
<script src="{{ asset('build/assets/app-xxxxxxxx.js') }}"></script>

Sass定义 #

Sass是一款CSS预处理器，支持变量、嵌套规则、混合宏等特性，能简化CSS编写、提升代码复用性，最终会被编译为浏览器可识别的普通CSS。

Sass安装 #

在项目根目录运行npm命令安装：

npm install sass --save-dev

使用Sass安装Font Awesome的流程 #

1. 先安装Font Awesome包（同无需Sass方案的步骤1）
2. 新建或编辑resources/sass/app.scss，按需导入Font Awesome的Sass模块：

// 核心样式
@import '@fortawesome/fontawesome-free/scss/fontawesome';
// 按需导入图标类型，比如实心图标、品牌图标
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/brands';

3. 在resources/js/app.js中导入该Sass文件：

import '../sass/app.scss';

4. 运行npm run build编译资源，再通过@vite指令在模板中引入即可。

内容的提问来源于stack exchange，提问作者David