mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-07 13:41:23 +00:00
Upgrade to Vite 8 and Tailwind CSS 4 (#595)
- Vite 6 → 8 (Rolldown bundler), laravel-vite-plugin 1 → 3, @vitejs/plugin-vue 5 → 6 - Tailwind CSS 3 → 4 with CSS-based config (@theme, @plugin, @utility) - Add @tailwindcss/vite plugin, remove postcss/autoprefixer/sass - Convert SCSS files to plain CSS (resources/sass → resources/css) - Migrate tailwind.config.js to CSS @theme directives - Rename deprecated utility classes (shadow-sm→shadow-xs, outline-none→outline-hidden, rounded-sm→rounded-xs, bg-gradient-to→bg-linear-to, ring→ring-3) - Migrate opacity utilities to color modifiers (bg-opacity, text-opacity, border-opacity, ring-opacity → color/N syntax) - Update primary color CSS vars to full rgb() values for TW4 color-mix() - Fix border-l color specificity for sidebar navigation (TW4 default border color changed from gray-200 to currentColor) - Fix invalid border color classes (border-grey-light, border-modal-bg, border--200) - Add @reference directive for @apply in Vue component style blocks - Convert Vue component <style lang="scss"> blocks to plain CSS
This commit is contained in:
committed by
GitHub
parent
691178857f
commit
ad5a7e51b9
19
vite.config.js
vendored
19
vite.config.js
vendored
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import { resolve } from 'path';
|
||||
import laravel from 'laravel-vite-plugin';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
@@ -12,7 +13,6 @@ export default defineConfig({
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
|
||||
'@': resolve(__dirname, './resources/'),
|
||||
$fonts: resolve(__dirname, './resources/static/fonts'),
|
||||
$images: resolve(__dirname, './resources/static/img')
|
||||
@@ -20,26 +20,17 @@ export default defineConfig({
|
||||
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs']
|
||||
},
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
vue({
|
||||
template: {
|
||||
transformAssetUrls: {
|
||||
// The Vue plugin will re-write asset URLs, when referenced
|
||||
// in Single File Components, to point to the Laravel web
|
||||
// server. Setting this to `null` allows the Laravel plugin
|
||||
// to instead re-write asset URLs to point to the Vite
|
||||
// server instead.
|
||||
base: null,
|
||||
|
||||
// The Vue plugin will parse absolute URLs and treat them
|
||||
// as absolute paths to files on disk. Setting this to
|
||||
// `false` will leave absolute URLs un-touched so they can
|
||||
// reference assets in the public directory as expected.
|
||||
includeAbsolute: false,
|
||||
},
|
||||
},
|
||||
}),
|
||||
laravel([
|
||||
'resources/scripts/main.js'
|
||||
])
|
||||
laravel({
|
||||
input: ['resources/scripts/main.js'],
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user