How to build vite each css files in a specific path (JS path working but not for CSS files) (Fixed!)

Question

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.

You can archive it with rollupOptions stackoverflow.com/questions/66863200/… stackoverflow.com/questions/76943551/… — Damian Chudobiński
– Damian Chudobiński, Commented Sep 15, 2024 at 22:24
This question is similar to: Changing the input and output directory in Vite. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — Damian Chudobiński
– Damian Chudobiński, Commented Sep 15, 2024 at 22:25
Files that do not need to be built can be placed directly in the public directory. There is no need to go through Vite. — puklipo
– puklipo, Commented Sep 16, 2024 at 2:51

Ashley Mok · Accepted Answer · 2024-09-16 18:30:13Z

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,
        }),
    ],
});

Collectives™ on Stack Overflow

How to build vite each css files in a specific path (JS path working but not for CSS files) (Fixed!)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related