Level 1
I fixed my issue after updating my npm vite package.
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
const cssPath = assetInfo.name.replace(
/^resources\/css\//,
""
); // Remove the 'resources/css/' prefix
const folders = cssPath.split("/").slice(1, -1); // Split the path into folders and take everything after the first folder (css), excluding the file name
const fileName = cssPath.split("/").slice(-1)[0]; // Get the file name
console.log(cssPath);
console.log(folders);
if (folders.length > 0) {
return `css/${folders.join(
"/"
)}/${fileName}.[hash][extname]`;
} else {
return `css/${fileName}.[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,
}),
],
});
CSS files did not follow the input file structure like JS files.
public/build/assets/manifest.json 3.31 kB │ gzip: 0.49 kB
public/build/assets/css/auth.css.58aa679a.css 2.58 kB │ gzip: 0.87 kB
public/build/assets/css/admin.css.253065b9.css 3.60 kB │ gzip: 0.76 kB
public/build/assets/css/portal.css.aed61d2d.css 15.66 kB │ gzip: 2.74 kB
public/build/assets/css/page.css.242548e3.css 37.23 kB │ gzip: 3.84 kB
public/build/assets/css/app.css.2aa3cd5d.css 42.14 kB │ gzip: 6.64 kB
public/build/assets/css/cms.css.93f3dc97.css 209.85 kB │ gzip: 30.72 kB
public/build/assets/css/vendor.css.36d60450.css 260.33 kB │ gzip: 43.03 kB
public/build/assets/js/libraries/cs.js 0.03 kB │ gzip: 0.05 kB │ map: 0.09 kB
public/build/assets/js/config/core/dev/app.js 0.03 kB │ gzip: 0.05 kB │ map: 0.09 kB
public/build/assets/js/libraries/skin.js 0.03 kB │ gzip: 0.05 kB │ map: 0.09 kB
public/build/assets/js/libraries/vertex.js 0.04 kB │ gzip: 0.06 kB │ map: 0.09 kB
public/build/assets/js/app/modules/admin/member/member.js 0.10 kB │ gzip: 0.12 kB │ map: 0.32 kB
public/build/assets/js/app/modules/admin/managing/listing.js 0.11 kB │ gzip: 0.13 kB │ map: 0.34 kB
public/build/assets/js/layouts/smart.js 0.41 kB │ gzip: 0.25 kB │ map: 0.98 kB
public/build/assets/js/app/layouts/portal.js 1.14 kB │ gzip: 0.52 kB │ map: 5.67 kB
public/build/assets/js/app/layouts/page.js 3.23 kB │ gzip: 1.22 kB │ map: 17.09 kB
public/build/assets/js/sockets/all.js 11.08 kB │ gzip: 2.81 kB │ map: 59.57 kB
public/build/assets/js/libraries/widget.js 19.52 kB │ gzip: 5.55 kB │ map: 97.94 kB
public/build/assets/js/app/layouts/bxslider.js 23.42 kB │ gzip: 6.01 kB │ map: 92.28 kB
public/build/assets/js/app.js 24.11 kB │ gzip: 6.92 kB │ map: 109.80 kB
public/build/assets/js/bootstrap.js 35.19 kB │ gzip: 14.17 kB │ map: 167.30 kB
public/build/assets/js/vendor.js 611.08 kB │ gzip: 175.86 kB │ map: 2,855.11 kB
Please or to participate in this conversation.