Ashley_Mok's avatar

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

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
0 likes
1 reply
Ashley_Mok's avatar

I fixed my issue after updating my npm vite package.

Please or to participate in this conversation.