讲师中心 微信公众号
AI工具推荐 视频效率加速

Laravel Vite配置多个CSS入口怎么写

大杰同学_5572

大杰同学_5572

发布时间:2026-08-10 17:47:15

|

136人浏览过

|

来源于php中文网

原创

必须显式声明多个CSS入口文件,如input: ['resources/css/app.css', 'resources/css/admin.css'],并在对应Blade模板中用@vite()单独引入;各CSS入口禁止互相@import,应通过@layer配合@tailwind分层复用公共样式。

laravel vite配置多个css入口怎么写

在Laravel项目中使用Vite构建时,需要为不同页面或模块单独编译CSS(如后台管理样式与前台样式分离),避免样式污染或体积膨胀,必须显式声明多个CSS入口文件,否则Vite默认只处理resources/css/app.css并忽略其他CSS文件。

确认Vite配置基础结构

打开vite.config.js,确保已安装@vitejs/plugin-vuelaravel-vite-plugin,且导出的是defineConfig对象。若未初始化Vite,先运行php artisan vite:install生成基础配置。

检查plugins数组中是否包含laravel()调用——这是Laravel Vite插件的入口,缺失则所有资源路径解析失败。

声明多个CSS入口文件

方法一:在laravel()插件中直接传入input数组

立即学习前端免费学习笔记(深入)”;

input参数从单个字符串改为字符串数组,每个元素指向一个独立CSS文件路径(支持相对路径):

input: ['resources/css/app.css', 'resources/css/admin.css', 'resources/css/print.css']

这一步会触发Vite为每个CSS文件生成独立的输出文件(如app.cssadmin.css),但【注意:这些CSS不会自动注入HTML,需手动引入】

在Blade模板中分别引入对应CSS

第一步:在resources/views/layouts/app.blade.php中,用@vite指令加载主入口:

Laravel
Laravel

避免常见的Laravel错误:N+1查询、批量赋值、缓存陷阱及队列序列化陷阱。

下载

@vite('resources/css/app.css')

第二步:在resources/views/admin/layout.blade.php中,单独加载后台CSS:

@vite('resources/css/admin.css')

第三步:在需要打印样式的页面(如invoice.blade.php)中,仅引入打印专用CSS:

@vite('resources/css/print.css')

Vite会为每个@vite()参数匹配对应的输入路径,并只注入该入口及其依赖的CSS——不引入的入口不会被打包进当前页面。

避免CSS重复打包的硬性约束

确保各CSS入口文件之间【无@import互相引用】,否则Vite会将被导入的CSS合并进主入口,导致多入口失效。例如admin.css里不能写@import '../css/app.css';

如果确实需要共享变量或重置样式,改用@layer base@layer utilities配合Tailwind的@tailwind指令分层管理,而非传统@import

这一步操作起来很简单,直接把公共基础样式抽成resources/css/base.css,然后在每个入口CSS顶部用@layer base { @tailwind base; }调用即可。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

3776

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

857

2023.07.27

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

1698

2023.07.28

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

3046

2023.08.01

css字体颜色
css字体颜色

CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

5905

2023.08.10

什么是css
什么是css

CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

5051

2023.08.10

css三角形怎么写
css三角形怎么写

CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

1757

2023.08.21

css设置文字颜色
css设置文字颜色

CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

2391

2023.08.22

Vibeknow在线使用入口合集
Vibeknow在线使用入口合集

本专题汇总了Vibeknow在线创作视频的官方入口及网页版使用教程,涵盖PPT、PDF、Word等文档一键转讲解视频的核心操作,并整理了免费版水印规则与手机端浏览器访问指南,助你快速将知识内容视频化。

0

2026.09.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 5.6万人学习

CSS教程
CSS教程

共754课时 | 93.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn