Laravel 9.x（Vite）如何在home.blade.php中引入自定义CSS？

核心问题原因 #

你用{{asset('css/style.css')}}出现404，是因为Vite构建后的CSS文件不在public/css目录下，而是存放在public/build/assets/中，且文件名带哈希值（比如style.0327f7a6.css），手动写路径不仅路径错误，还无法适配Vite的缓存哈希机制。

正确解决方案 #

Laravel 9默认用Vite替代Mix，官方提供了@vite指令来统一处理开发/生产环境的资源引入，步骤如下：

1. 确保自定义CSS被Vite识别

   • 将自定义CSS文件放在resources/css/目录下（比如resources/css/style.css）
   • 在resources/js/app.js中导入该CSS文件，让Vite知道需要处理它：

     import '../css/style.css';
     

2. 在Blade模板中引入资源
   在模板的<head>标签内添加@vite指令，它会自动处理生产环境的哈希文件路径：

   <!-- 同时引入CSS和JS -->
   @vite(['resources/css/style.css', 'resources/js/app.js'])
   
   <!-- 仅引入CSS -->
   @vite('resources/css/style.css')
   

   执行npm run build后，这个指令会自动生成指向public/build/assets/style.xxx.css的正确链接，无需手动拼接路径。

3. 修复开发环境npm run dev卡顿问题
   如果开发环境运行npm run dev卡本地URL，可以在vite.config.js中指定端口避免冲突：

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/style.css', 'resources/js/app.js'],
               refresh: true,
           }),
       ],
       server: {
           port: 3001, // 替换为你可用的端口
       },
   });
   

   重新运行npm run dev后，访问Laravel本地服务（如localhost:8000）即可正常加载开发环境资源。

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