How to build vite each css files in a specific path (JS path working but not for CSS files) (Fixed!)
Updated!!!
I tried the below code and it put all my JS files into the correct folder structure but unfortunately it not working for CSS files. Can someone help me?
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";
export default defineConfig({
build: {
outDir: "public/build/assets",
rollupOptions: {
input: {
"js/app": path.resolve(__dirname, "resources/js/app.js"),
"js/bootstrap": path.resolve(
__dirname,
"resources/js/bootstrap.js"
),
"js/vendor": path.resolve(__dirname, "resources/js/vendor.js"),
"js/sockets/all": path.resolve(
__dirname,
"resources/js/sockets/all.js"
),
"js/layouts/smart": path.resolve(
__dirname,
"resources/js/layouts/smart.js"
),
"js/libraries/cs": path.resolve(
__dirname,
"resources/js/libraries/cs.js"
),
"js/libraries/skin": path.resolve(
__dirname,
"resources/js/libraries/skin.js"
),
"js/libraries/vertex": path.resolve(
__dirname,
"resources/js/libraries/vertex.js"
),
"js/libraries/widget": path.resolve(
__dirname,
"resources/js/libraries/widget.js"
),
"js/app/layouts/bxslider": path.resolve(
__dirname,
"resources/js/app/layouts/bxslider.js"
),
"js/app/layouts/page": path.resolve(
__dirname,
"resources/js/app/layouts/page.js"
),
"js/app/layouts/portal": path.resolve(
__dirname,
"resources/js/app/layouts/portal.js"
),
"js/app/modules/admin/managing/listing": path.resolve(
__dirname,
"resources/js/app/modules/admin/managing/listing.js"
),
"js/app/modules/admin/member/member": path.resolve(
__dirname,
"resources/js/app/modules/admin/member/member.js"
),
"js/config/core/dev/app": path.resolve(
__dirname,
"resources/js/config/core/dev/app.js"
),
"css/app": path.resolve(__dirname, "resources/css/app.css"),
"css/vendor": path.resolve(
__dirname,
"resources/css/vendor.css"
),
"css/app/layouts/cms": path.resolve(
__dirname,
"resources/css/app/layouts/cms.css"
),
"css/app/layouts/auth": path.resolve(
__dirname,
"resources/css/app/layouts/auth.css"
),
"css/app/layouts/page": path.resolve(
__dirname,
"resources/css/app/layouts/page.css"
),
"css/app/layouts/admin": path.resolve(
__dirname,
"resources/css/app/layouts/admin.css"
),
"css/app/layouts/portal": path.resolve(
__dirname,
"resources/css/app/layouts/portal.css"
),
},
output: {
entryFileNames: (chunkInfo) => {
if (chunkInfo.name.startsWith("js/")) {
return `${chunkInfo.name}.js`; // Avoid adding 'js/' again
}
if (chunkInfo.name.startsWith("css/")) {
return `${chunkInfo.name}.css`; // Avoid adding 'css/' again
}
return `${chunkInfo.name}.js`; // Default
},
chunkFileNames: (chunkInfo) => {
if (chunkInfo.name.startsWith("js/")) {
return `${chunkInfo.name}.js`; // Same logic for chunks
}
if (chunkInfo.name.startsWith("css/")) {
return `${chunkInfo.name}.css`;
}
return `${chunkInfo.name}.js`; // Default
},
assetFileNames: (assetInfo) => {
if (assetInfo.name?.endsWith(".css")) {
// Place general CSS files in the correct folder
if (assetInfo.name.includes("layouts")) {
return `css/app/layouts/[name].[hash][extname]`;
}
return `css/[name].[hash][extname]`;
}
if (assetInfo.name?.endsWith(".js")) {
return `js/[name].[hash][extname]`;
}
return `assets/[name].[hash][extname]`;
},
sourcemap: true,
},
},
},
plugins: [
laravel({
input: [
"resources/css/app.css",
"resources/css/vendor.css",
"resources/css/app/layouts/cms.css",
"resources/css/app/layouts/auth.css",
"resources/css/app/layouts/page.css",
"resources/css/app/layouts/admin.css",
"resources/css/app/layouts/portal.css",
"resources/js/app.js",
"resources/js/bootstrap.js",
"resources/js/vendor.js",
"resources/js/sockets/all.js",
"resources/js/layouts/smart.js",
"resources/js/libraries/cs.js",
"resources/js/libraries/skin.js",
"resources/js/libraries/vertex.js",
"resources/js/libraries/widget.js",
"resources/js/app/layouts/bxslider.js",
"resources/js/app/layouts/page.js",
"resources/js/app/layouts/portal.js",
"resources/js/app/modules/admin/managing/listing.js",
"resources/js/app/modules/admin/member/member.js",
"resources/js/config/core/dev/app.js",
],
refresh: true,
}),
],
});
Old question!!
I want to achieve a similar way to below using Vite,
Below is the code I tried but all the js and cs files are built inside the public/build/assets folder. But I want something like this.
For example,
resources/css/app.js need to store inside public/build/assets/css/app.js
resources/css/admin/member/index.js need to store inside public/build/assets/css/admin/member/index.js
resources/css/admin/lead/index.js need to store inside public/build/assets/css/admin/lead/index.js
**
It's similar for JS files too.**
Below is the code I tried.
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
export default defineConfig({
build: {
outDir: "public/build",
},
plugins: [
laravel({
input: [
"resources/css/app.css",
"resources/css/vendor.css",
"resources/css/app/layouts/cms.css",
"resources/css/app/layouts/auth.css",
"resources/css/app/layouts/page.css",
"resources/css/app/layouts/admin.css",
"resources/css/app/layouts/portal.css",
"resources/js/app.js",
"resources/js/bootstrap.js",
"resources/js/vendor.js",
"resources/js/sockets/all.js",
"resources/js/layouts/smart.js",
"resources/js/libraries/cs.js",
"resources/js/libraries/skin.js",
"resources/js/libraries/vertex.js",
"resources/js/libraries/widget.js",
"resources/js/app/layouts/bxslider.js",
"resources/js/app/layouts/page.js",
"resources/js/app/layouts/portal.js",
"resources/js/app/modules/admin/managing/listing.js",
"resources/js/app/modules/admin/member/member.js",
"resources/js/config/core/dev/app.js",
],
refresh: true,
}),
],
});
Could someone help me fix this? This is the 1st time I'm using Vite. I'm currently trying to manually upgrade the Laravel 5.2 project to Laravel 10. So I'm trying to keep most of the file structure the same.
Solution
I fixed my issue after updating my npm vite package. Here is my solution if anyone has this issue again.
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";
export default defineConfig({
build: {
outDir: "public/build",
emptyOutDir: false,
assetsDir: "static",
sourcemap: true,
rollupOptions: {
input: {
"js/app": path.resolve(__dirname, "resources/js/app.js"),
"js/bootstrap": path.resolve(
__dirname,
"resources/js/bootstrap.js"
),
"js/vendor": path.resolve(__dirname, "resources/js/vendor.js"),
"js/sockets/all": path.resolve(
__dirname,
"resources/js/sockets/all.js"
),
"js/layouts/smart": path.resolve(
__dirname,
"resources/js/layouts/smart.js"
),
"js/libraries/cs": path.resolve(
__dirname,
"resources/js/libraries/cs.js"
),
"js/libraries/skin": path.resolve(
__dirname,
"resources/js/libraries/skin.js"
),
"js/libraries/vertex": path.resolve(
__dirname,
"resources/js/libraries/vertex.js"
),
"js/libraries/widget": path.resolve(
__dirname,
"resources/js/libraries/widget.js"
),
"js/app/layouts/bxslider": path.resolve(
__dirname,
"resources/js/app/layouts/bxslider.js"
),
"js/app/layouts/page": path.resolve(
__dirname,
"resources/js/app/layouts/page.js"
),
"js/app/layouts/portal": path.resolve(
__dirname,
"resources/js/app/layouts/portal.js"
),
"js/app/modules/admin/managing/listing": path.resolve(
__dirname,
"resources/js/app/modules/admin/managing/listing.js"
),
"js/app/modules/admin/member/member": path.resolve(
__dirname,
"resources/js/app/modules/admin/member/member.js"
),
"js/config/core/dev/app": path.resolve(
__dirname,
"resources/js/config/core/dev/app.js"
),
"css/app": path.resolve(__dirname, "resources/css/app.css"),
"css/vendor": path.resolve(
__dirname,
"resources/css/vendor.css"
),
"css/app/layouts/cms": path.resolve(
__dirname,
"resources/css/app/layouts/cms.css"
),
"css/app/layouts/auth": path.resolve(
__dirname,
"resources/css/app/layouts/auth.css"
),
"css/app/layouts/page": path.resolve(
__dirname,
"resources/css/app/layouts/page.css"
),
"css/app/layouts/admin": path.resolve(
__dirname,
"resources/css/app/layouts/admin.css"
),
"css/app/layouts/portal": path.resolve(
__dirname,
"resources/css/app/layouts/portal.css"
),
},
output: {
entryFileNames: (chunkInfo) => {
if (chunkInfo.name.startsWith("js/")) {
return `${chunkInfo.name}.[hash].js`;
}
if (chunkInfo.name.startsWith("css/")) {
return `${chunkInfo.name}.css`;
}
return `${chunkInfo.name}.[hash].js`;
},
chunkFileNames: (chunkInfo) => {
if (chunkInfo.name.startsWith("js/")) {
return `${chunkInfo.name}.[hash].js`;
}
if (chunkInfo.name.startsWith("css/")) {
return `${chunkInfo.name}.css`;
}
return `${chunkInfo.name}.[hash].js`;
},
assetFileNames: (assetInfo) => {
if (assetInfo.name?.endsWith(".css")) {
return `[name].[hash][extname]`;
}
if (assetInfo.name?.endsWith(".js")) {
return `js/[name].[hash][extname]`;
}
if (
assetInfo.name.startsWith("fonts/") ||
assetInfo.name.startsWith("vendor/")
) {
return `[name][extname]`;
}
return `[name].[hash][extname]`;
},
},
},
},
plugins: [
laravel({
input: [
"resources/css/app.css",
"resources/css/vendor.css",
"resources/css/app/layouts/cms.css",
"resources/css/app/layouts/auth.css",
"resources/css/app/layouts/page.css",
"resources/css/app/layouts/admin.css",
"resources/css/app/layouts/portal.css",
"resources/js/app.js",
"resources/js/bootstrap.js",
"resources/js/vendor.js",
"resources/js/sockets/all.js",
"resources/js/layouts/smart.js",
"resources/js/libraries/cs.js",
"resources/js/libraries/skin.js",
"resources/js/libraries/vertex.js",
"resources/js/libraries/widget.js",
"resources/js/app/layouts/bxslider.js",
"resources/js/app/layouts/page.js",
"resources/js/app/layouts/portal.js",
"resources/js/app/modules/admin/managing/listing.js",
"resources/js/app/modules/admin/member/member.js",
"resources/js/config/core/dev/app.js",
],
refresh: true,
esm: true,
}),
],
});
- Clear clipboard to prohibit unauthorised copying, insert message?
- Supplying a reason for AbortController?
- Can you render a html file into a container?
- Using performance.mark() with Chrome dev tools performance tab
- How to save javascript array as redis list
- Find out whether Chrome console is open
- How to wait for requests and validate responses using playwright?
- Show Bootstrap Alert on Button Click via Javascript / jQuery
- How to post a file from a form with Axios
- Why doesn't Javascript handle divide by zero error in a try catch
- how can I add menu button in telegram bot
- Debounce in ReactJS
- Javascript question mark operator, multiple question marks
- Could not find a declaration file for module '@hookform/resolvers/zod'
- Stripe CLI trigger subscription failed event for a specifc customer
- Steps to send a https request to a rest service in Node js
- react jest confirming snapshot change
- Getting a list of all countries to using npm countries-list
- How do you limit the number of options selected in an HTML <select> element?
- Different sorting
- add an event listener on an element I've created in javascript
- Web Component not rendering when loaded from UNPKG CDN?
- Uncaught TypeError: Failed to resolve module specifier "react-router-dom". Relative references must start with either "/", "./", or "../"
- Javascript Date - set just the date, ignoring time?
- Form validate() method is not working with Vue 3 and Vuetify 3
- Running V8 Javascript Engine Standalone
- PHP - Extract frame during Video upload
- Can a PWA app be published to app store and play store
- How to check if a caught exception was thrown because of triggering an AbortController?
- Apollo Client: retrieving the results from a query with errors