# CSS and JS not enqueued with Sage 11

**URL:** https://discourse.roots.io/t/css-and-js-not-enqueued-with-sage-11/29363
**Category:** sage
**Tags:** vite, sage11
**Created:** 2025-03-05T13:51:44Z
**Posts:** 8

## Post 1 by @Jordan_Wilson — 2025-03-05T13:51:45Z

Hey, started migrating a project to Sage 11.

I have created a fresh project and pulled required files across.

When after running a build no JS or CSS is being loaded on the front-end.

Any advice?

Can’t see where CSS and JS is being enqueued in this theme setup.

Thanks,  
Jordan

---

## Post 2 by @ben — 2025-03-05T13:54:55Z

CSS and JS are not enqueued in Sage 11 because the assets are loaded via the `@vite` Blade directive:

> <https://github.com/roots/sage/blob/9864d7cf36aecb77e90ceb3725ac359fae288d90/resources/views/layouts/app.blade.php#L9>

> I have created a fresh project and pulled required files across.

This shouldn’t happen on a fresh project with no modifications. Have you attempted just a stock Sage install before making changes?

---

## Post 3 by @Jordan_Wilson — 2025-03-05T14:01:06Z

Hey Ben,

Thanks for the speedy reply.

My fault this one, I overwrote the head.blade.php file with the one from my Sage 9 project.

I have added the vite directive and made progress but a new error has now appeared.

Unable to locate file in Vite manifest: resources/css/app.css.

More context, I have followed the site docs to remove tailwind and use bootstrap as this is a project from pre tailwind.

Current Vite config below:

```
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import { wordpressPlugin, wordpressThemeJson } from '@roots/vite-plugin';

export default defineConfig({
  base: '[redacted]',
  plugins: [
    laravel({
      input: [
        'resources/css/app.scss',
        'resources/js/app.js',
        'resources/css/editor.scss',
        'resources/js/editor.js',
      ],
      refresh: true,
    }),

    wordpressPlugin(),

    // Generate the theme.json file in the public/build/assets directory
    // based on the Tailwind config and the theme.json file from base theme folder
    wordpressThemeJson({
      disableTailwindColors: true,
      disableTailwindFonts: true,
      disableTailwindFontSizes: true,
    }),
  ],
  resolve: {
    alias: {
      '@scripts': '/resources/js',
      '@styles': '/resources/css',
      '@fonts': '/resources/fonts',
      '@images': '/resources/images',
    },
  },
})
```

---

## Post 4 by @ben — 2025-03-05T14:06:09Z

Fixing the guide right now, but change `app.css` to `app.scss` in the `@vite()` directive in `resources/views/layouts/app.blade.php`

---

## Post 5 by @Jordan_Wilson — 2025-03-05T14:46:28Z

Amazing thanks for the help!

---

## Post 6 by @Tetrahedrax — 2025-03-05T14:55:43Z

> [@ben](#):
>
> CSS and JS are not enqueued in Sage 11 because the assets are loaded via the `@vite` Blade directive:
> 
> [sage/resources/views/layouts/app.blade.php at 9864d7cf36aecb77e90ceb3725ac359fae288d90 · roots/sage · GitHub](https://github.com/roots/sage/blob/9864d7cf36aecb77e90ceb3725ac359fae288d90/resources/views/layouts/app.blade.php#L9)

Can you dumb this down for me?

Does this mean we are no longer going to have to do stuff like this?

```
if (is_front_page()) {
        bundle('home')->enqueue();
    }
```

---

## Post 7 by @ben — 2025-03-05T15:08:55Z

> [@Tetrahedrax](#):
>
> Does this mean we are no longer going to have to do stuff like this?
> 
> ```
> if (is_front_page()) {
> bundle('home')->enqueue();
> }
> ```

The `bundle()` function in Acorn is for bud.js

Feel free to open a new topic if you have questions, but I’m closing this one since it’s solved

---

## Post 8 by @ben — 2025-03-05T15:08:59Z