Bud component compiling

bud
,
1

Good morning everyone. For quite some time now, I have been working on the development of several portals with a new folder structure. I am attaching an image as an example.

Screenshot 2024-06-14 alle 12.12.33
Screenshot 2024-06-14 alle 12.12.33818×450 29.2 KB

Technically, everything works correctly, except that I am experiencing some issues during development because Bud seems very slow during compilation and HMR.

Each individual SCSS file related to a component uses mixins internally, so initially, I imported my app file at the top of each SCSS file, which included global styles, utilities, mixins, etc. Later, I used bud.sass.importGlobal to use common resources across the entire application, and then within Bud, I had:

const components_entries = await app.glob("@src/views/components/**/*.{js,ts,scss}")

With both solutions, I encountered significant slowness as mentioned earlier. Additionally, I noticed that when inspecting the page, a series of <style></style> tags are injected in the head, I’ll say one for each component created.

What am I doing wrong? Have I missed something?
Thank you in advance for the support

2

Here is my config for blocks, it works fine.

import {basename, join, dirname} from 'node:path';

const mappedAssets = async (app, dir) => {
  const folders = app.globSync(`@src/views/${dir}/*/index.blade.php`);

  const rel = (s) => join(dir, basename(dirname(s)));

  const entry = (allPaths, path) => {
    const assets = app.globSync(`@src/views/${path}/index.{js,scss}`);

    if (assets.length) {
      return {...allPaths, [path]: assets};
    } else {
      delete allPaths.path;
      return allPaths;
    }
  };

  return folders.map(rel).reduce(entry, {});
};
export default async (app) => {
// ....
app.entry({
    app: ['@scripts/app', '@styles/app'],
    // ....
    ...(await mappedAssets(app, 'blocks')),
  });
// ....
};