Level 51
If you're running npm run dev the @vite directive it point to http://127.0.0.1:5176/@vite.
If you want to point to the build files, you need to stop the npm run dev and (maybe) delete the hot file in the public directory.
Aug 27, 2023
6
Level 1
Laravel Vite doesn't take files with the correct name
I am migrating from Laravel Mix to Vite, but I have encountered a problem.
This is my vite.config:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
app.js
import './bootstrap';
import '../css/app.css';
app.css
@config "../../tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
when I use the npm run build command. he generates the files for me in: public\build\assets And that's fine, however, the files are called:
public/build/manifest.json 0.39 kB │ gzip: 0.15 kB
public/build/assets/app-5229ad1e.css 155.98 kB │ gzip: 22.17 kB
public/build/assets/app-75742ecd.js 29.03 kB │ gzip: 11.59 kB
In my blade I have:
@vite(['build/app.js', 'build/app.css'])
Which is then interpreted to me as:
<script type="module" src="http://127.0.0.1:5176/@vite/client" data-navigate-track="reload"></script>
<link rel="stylesheet" href="http://127.0.0.1:5176/resources/css/app.css" data-navigate-track="reload" />
How do I get the resources interpreted with the correct name?
Level 1
Thank you very much, the files are generated correctly, but how come the @vite tag keeps calling me the files in resources and not in public/build?
PS C:\xampp\htdocs\***> npm run dev
> dev
> vite
Port 5173 is in use, trying another one...
VITE v4.4.9 ready in 3121 ms
➜ Local: http://localhost:5174/
➜ Network: use --host to expose
➜ press h to show help
LARAVEL v10.20.0 plugin v0.8.0
➜ APP_URL: http://127.0.0.1
🌼 daisyUI 3.6.3 https://daisyui.com
╰╮
╰─ ✔︎ [ 1 ] theme is enabled. You can add more themes or make your own theme:
https://daisyui.com/docs/themes
❤︎ Support daisyUI: https://opencollective.com/daisyui
<script type="module" src="http://[::1]:5174/@vite/client" data-navigate-track="reload"></script><link rel="stylesheet" href="http://[::1]:5174/resources/css/app.css" data-navigate-track="reload" />
Level 15
@Xanger that's using the development server, Vite builds the resources during runtime then. When using build is uses the builds paths using the method I described below.
Level 15
The Vite directive uses the resources filenames in conjunction with a generated manifest.json file. The resources file paths are used as the keys for the generated build paths. As an example:
@vite(['resources/css/app.css', 'resources/js/app.js'])
Laravels' Vite directive will then parse the manifest.json generated by Vite under public/build/manifest.json and point to the correct build file.
{
"resources/css/app.css": {
"file": "assets/app-c50889d5.css",
"isEntry": true,
"src": "resources/css/app.css"
},
"resources/js/app.js": {
"file": "assets/app-0d91dc04.js",
"isEntry": true,
"src": "resources/js/app.js"
}
}
1 like
Level 1
@thinkverse Thank you very much, you have made it very clear to me how Vite behaves.
However, I don't understand why in the app.css file the @import doesn't work, this is how it is "rendirized" in "http://[::1]:5173/resources/css/app.css"
@import "select2.css";
@import "elements.css";
@config "../../tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.bc {
background-color: #eee;
font-size: .7rem;
border-radius: 0!important;
color: #59595f;
border: 1px solid #dfdfdf;
padding: 5px!important;
font-weight: 700;
}
}
Level 15
@Xanger not sure never had an issue with CSS imports in Vite myself. Could be the name or path cannot be resolved. 🤷♂️ If they're in the same directory try using ./ before be URL. Optionally Vite's CSS imports do support aliasing which can come in handy in situations like this.
1 like
Please or to participate in this conversation.