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,
}),
],
});
- Is it possible to pull css values with HTA javascript?
- What a strange syntax?
- JavaScript / Jest: How to show logs from test case only when test fails?
- How to secure my login page
- How can I create a two-way mapping in JavaScript, or some other way to swap out values?
- Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties
- Page.locator() is the recommended way to select and interact with elements. Why does it offer less functionalities than Page.$()?
- How to filter object array based on attributes?
- How do you convert from emoji to unicode escapes in JS
- How to simulate a mouse click?
- Is it possible to add a single item to a vis.js timeline?
- How to ensure order of Cypress request execution
- Jquery Ajax Problem
- Can I run a function after navigating to a new page and waiting for that page to finish loading?
- Cannot start cocos after adding a new file
- Active link with React-Router?
- Is there a way to schedule offline notifications in a pwa?
- How to get the grid coordinates of an element using JavaScript?
- Bootstrap popper.js Failed to find a valid digest in the 'integrity' attribute for resource
- LeafLet map doesnt render properly on modal
- Create object from array
- How to ignore lines of code from coverage in vitest?
- How to manage CORS in Django
- How can I get an element's Accessible Name in javascript in the browser?
- TypeError: fs.readFileSync is not a function in Next.js
- Show hide divs on click in HTML and CSS without jQuery
- If an IIFE contains just one variable declaration that is immediately exported to global scope, why bother with it?
- Need explanation on following type of Javascript code
- What does an array literal with the `for` keyword inside mean in JavaScript?
- How to call a function every minute in a React component?