Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – How I can import all js and all css that reside in resourced folder, in my vite config without need to define them one by one?

In my laravel 10 project I load a js as:

@vite(['resources/js/myjs.js'])

And my vite.config.js contains the follwoing settings

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from "@rollup/plugin-inject";

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/style.css',
                'resources/css/another-style.css',

                'resources/js/main.js',
                'resources/js/my.js',
                'resources/js/myjs.js',

                'node_modules/jquery/dist/jquery.js',
                'node_modules/bootstrap/dist/css/bootstrap.css',
                'node_modules/@fortawesome/fontawesome-free/css/all.css'
            ],
            refresh: true,
        }),
        inject({
            $: 'jquery',
            jQuery: 'jquery',
            'common_functions':'resources/js/common_functions.js',
        }),
    ],
    build: {
        rollupOptions: {
            external: [
                "js/modules/*",
            ]
        }
    }
});

But if I need another js file I should place it in vite.config.js thus makes the divelopment kinda slow because I need to place any new ccs or js into the vite.config.js that due to rush of development I may forget it.

Is there a way to conveniently for the vite to look any files defined in resources/css and resources/js folders?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As @Burak Ayyildiz says you need to manually to traverse the directory and get the paths as an array. But the answer defined from docu has some issues:

    node:fs:1513
  const result = binding.readdir(
                         ^

Error: ENOTDIR: not a directory, scandir '/var/www/html/resources/css/fa-check.css'
    at readdirSync (node:fs:1513:26)
    at walkDir (file:///var/www/html/test.mjs:41:17)
    at getFilesFromDir (file:///var/www/html/test.mjs:51:5)
    at file:///var/www/html/test.mjs:55:20
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async loadESM (node:internal/process/esm_loader:28:7)
    at async handleMainPromise (node:internal/modules/run_main:120:12) {
  errno: -20,
  code: 'ENOTDIR',
  syscall: 'scandir',
  path: '/var/www/html/resources/css/my.css'
}

    Therefore, a fix for the function is:

    import { readdirSync,lstatSync } from 'fs';
import { resolve } from 'path';

function getFilesFromDir(dir, fileTypes) {
    const filesToReturn = [];

    function walkDir(currentPath) {

        if(lstatSync(currentPath).isFile()){
            filesToReturn.push(currentPath);
            return;
        }

        const files = readdirSync(currentPath);
        for (let i in files) {
            const curFile = resolve(currentPath, files[i]);
            if(lstatSync(curFile).isDirectory()){
                walkDir(curFile);
                continue;
            }
            filesToReturn.push(curFile);
        }
    }

    walkDir(resolve(__dirname, dir));
    return filesToReturn;
}

    That also simplifies the code as well.


  2. 0

    Afaik there is no option to pass wildcard *. According to: docu. We have to do it programmatically , maybe like this, where it traverses through the folders and get the path of the files, you could the just spread the ...pageStyles into the object, where you want to insert the filepaths.

    function getFilesFromDir(dir, fileTypes) {
    const filesToReturn = [];

    function walkDir(currentPath) {
        const files = readdirSync(currentPath);
        for (let i in files) {
            const curFile = resolve(currentPath, files[i]);
            if (readdirSync(curFile, { withFileTypes: true }).some(dirent => dirent.isDirectory())) {
                walkDir(curFile);
            } else {
                if (fileTypes.indexOf(curFile.split('.').pop()) !== -1) {
                    filesToReturn.push(curFile);
                }
            }
        }
    }

    walkDir(resolve(__dirname, dir));
    return filesToReturn;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search