Skip to content

Conversation

@betsyecastro
Copy link
Contributor

@betsyecastro betsyecastro commented Nov 19, 2025

  • Requires Node.js v20
  • Installs the Vite plugin and created the Vite configuration file.
  • Includes adjustments to migrate from Webpack-style imports to ES module-compatible imports for Vite.
  • Includes updated npm scripts and updated blade templates to use the @Vite directive instead of the old asset helper.

@betsyecastro betsyecastro self-assigned this Nov 19, 2025
@betsyecastro betsyecastro added ✨ enhancement New feature or request 📦️ dependencies Update, change, or remove a dependency ☕️ javascript Pull requests that update Javascript code labels Nov 19, 2025
@betsyecastro betsyecastro force-pushed the upgrade-to-laravel-vite branch from 7ac0c02 to 02096df Compare November 26, 2025 03:53
@betsyecastro betsyecastro changed the title Laravel Vite Upgrade Upgrade from Laravel Mix to Vite Nov 26, 2025
…urcemaps only available in dev mode

The build.sourcemap option generates sourcemaps for JavaScript but not for CSS. This is a known Vite limitation that doesn't impact how Vite is designed to work, but it slightly affects our current workflow—the Vite dev server is required to use CSS sourcemaps for debugging styles. When changes are ready for deploy, use npm run build to compile and commit the assets.
Add the `vite-plugin-css-sourcemap plugin` to generate CSS sourcemaps during production builds and include it in compiled assets. Requires downgrading to Vite 6 and laravel-vite-plugin 1.x due to plugin compatibility constraints. With this change, `npm run build` generates both JS and CSS sourcemaps, eliminating the need to run the dev server for CSS debugging.
@betsyecastro
Copy link
Contributor Author

@wunc Vite serves assets from a local dev server during development and only compiles them for production. CSS sourcemaps are a known limitation—the build.sourcemap option only generates JS sourcemaps, while CSS sourcemaps require the dev server. A plugin exists to generate CSS sourcemaps in builds, but it only supports Vite 5–6 (we're on 7) and is relatively new. The last two commits on this PR are the two approaches proposed:

Commit b00287c f7a6173
Vite version 7 (latest) 6 (downgrade)
Dependencies "vite": "^7.2.2"
"laravel-vite-plugin": "^2.0.1"
"vite": "^6.4.1"
"laravel-vite-plugin": "^1.3.0"
"vite-plugin-css-sourcemap": "^1.0.2"
CSS sourcemaps Dev server only Included in build
Workflow Run dev server to debug CSS, then build for deploy Single npm run build for everything
Trade-off Stays current, extra step for CSS debugging Matches previous Mix workflow, older dependencies

@betsyecastro betsyecastro marked this pull request as ready for review December 18, 2025 17:53
@betsyecastro betsyecastro added the 🔨 tooling Related to dev tooling or workflow label Dec 18, 2025
@wunc
Copy link
Collaborator

wunc commented Dec 19, 2025

@betsyecastro thanks for the analysis. It's very helpful. Seeing this, I think I'd rather upgrade to the newer version (7) right now, and we'll adjust how we work in dev.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📦️ dependencies Update, change, or remove a dependency ✨ enhancement New feature or request ☕️ javascript Pull requests that update Javascript code 🔨 tooling Related to dev tooling or workflow

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants