Problem on migrating from mix to vite

I have this same issue. Did you figure out how to get it to work? I'm not sure how to do the same combine steps in vite.

Configure Vite: Vite doesn't use a configuration file like webpack.mix.js in Laravel Mix. Instead, it relies on a vite.config.js file. Create this file in the root of your project and configure it to your needs. Here's an example configuration for processing styles. import { defineConfig } from 'vite';

export default defineConfig({ build: { rollupOptions: { input: 'index.html', }, }, optimizeDeps: { include: ['vue', 'vue-router'], }, });

Update your project structure: Move your styles and image files to the appropriate directories in your Vite project. By default, Vite looks for your JavaScript entry file in src/main.js, so you can place your styles and images in the src directory.

import './styles/main.css'; import logo from './assets/logo.png';

However, keep in mind that Vite has a different approach and structure compared to Laravel Mix, so you may need to adjust your workflow accordingly.

I had the same issue.

 // webpack.mix.js
mix.combine('resources/assets/js/vendor/*', 'public/js/vendor.js')

and i cheche code above to

 // vite.config.js
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

const files = [
    'resources/assets/sass/app.scss',
    'resources/assets/sass/vendor.scss',
    'resources/assets/js/vendor.js',
];

export default defineConfig({
    plugins: [
        laravel(files),
    ],
});

and I created file resources/assets/js/vendor.js and import files from folder resources/vendor like this

// resources/assets/js/vendor.js
import some_module from '@js/vendor/some_module.js'

and for css files I think you can try css @import and add option to config build: { cssCodeSplit: false } from vite docs config build-options build-csscodesplit

or you may use SASS with SCSS syntax and use @use or @import feature of SASS and add componets to one file. I your case it's public/build/css/app.min.css

None of this worked for me. When I run npm install vite @vitejs/plugin-vue laravel-vite-plugin --save-dev as sugested, I get npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: undefined@undefined npm error Found: [email protected] npm error node_modules/vite npm error dev vite@"^4.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer vite@"^5.0.0" from @vitejs/[email protected] npm error node_modules/@vitejs/plugin-vue npm error dev @vitejs/plugin-vue@"*" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /home/kawikbr/.npm/_logs/2024-06-06T20_59_57_625Z-eresolve-report.txt npm error A complete log of this run can be found in: /home/kawikbr/.npm/_logs/2024-06-06T20_59_57_625Z-debug-0.log

When I run mix.combine('resources/assets/js/vendor/*', 'public/js/vendor.js') i get zsh: number expected

I'm still searching for a solution. Will return if I find it.