Filament•2w ago

Why do I get Unable to locate file in Vite manifest: resources/css/filament/manage/theme.css ?

I get an error Unable to locate file in Vite manifest: resources/css/filament/manage/theme.css. Even though my file path is correct. vite.config.js

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/tinymce/tinymce.scss',
                'resources/sass/admin/admin.scss',
                'resources/sass/app.scss',
                'resources/js/admin.js',
                'resources/js/app.js',
                'resources/css/filament/admin/theme.css'
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            // '~fontawesome': path.resolve(__dirname, 'node_modules/@fortawesome/fontawesome-free'),
            '~fontawesome': path.resolve(__dirname, 'resources/sass/fontawesome'),
        },
    }
});

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/tinymce/tinymce.scss',
                'resources/sass/admin/admin.scss',
                'resources/sass/app.scss',
                'resources/js/admin.js',
                'resources/js/app.js',
                'resources/css/filament/admin/theme.css'
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            // '~fontawesome': path.resolve(__dirname, 'node_modules/@fortawesome/fontawesome-free'),
            '~fontawesome': path.resolve(__dirname, 'resources/sass/fontawesome'),
        },
    }
});

39 Replies

o.mOP•2w ago

This is what my PanelProvider looks like ->viteTheme('resources/css/filament/manage/theme.css'); at the end of the code Is that because I use scss files instead of css?

awcodes•2w ago

Your vite config is looking for ‘resources/css/filament/admin/theme.css’ not ‘resources/css/filament/manage/theme.css’ Just need to get all your paths in check.

o.mOP•2w ago

Oh no! Thanks for the fix, this is how it looks after doing that.

o.mOP•2w ago

What happened???

o.mOP•2w ago

IT should look like better than this 😦

awcodes•2w ago

What’s off about the second screen shot.

o.mOP•2w ago

For the 2nd screenshot. The new tailwind classes should be called here because I added tailwind classes

awcodes•2w ago

Make sure the files that have those classes are included in the tailwind config Could be wrong, but looks to me like you’re using the tw prose class which has a max width, so it also needs a max-w-none class on the prose element. If thats what you’re talking about.

o.mOP•2w ago

Acutally no, ill display a better sample

o.mOP•2w ago

This text should become red, but its still gray

o.mOP•2w ago

awcodes•2w ago

Where are you adding the red class? Do you have a custom color in your tailwind config for “text-red” because that’s not a default class in tailwind. Try “text-red-500”

o.mOP•2w ago

changed it to that and rerun npm run dev, and (npm run build causes error)

awcodes•2w ago

And what is the error?

o.mOP•2w ago

Is it because this was removed? ->viteTheme('resources/css/filament/manage/theme.css');

awcodes•2w ago

Well, you still need that.

o.mOP•2w ago

Yeah, removed it because it breaks whenever I add that line of code

o.mOP•2w ago

Output looks like this

awcodes•2w ago

The default filament theme doesn’t have those classes. That’s the whole point of a custom theme. It builds against your code base and replaces the default filament theme.

o.mOP•2w ago

Yes understood

awcodes•2w ago

That’s just how tw works.

o.mOP•2w ago

so i need to install tailwind ? after doing the custom theme command for filament

awcodes•2w ago

Its already installed.

o.mOP•2w ago

ran npm dev

awcodes•2w ago

Is this a repo you can share?

o.mOP•2w ago

unfortunately its a private repo, not allowed :/ Hey but I found this one https://github.com/QwikDev/qwik/issues/836#issuecomment-2665044734 The error is unique Cant find any result from the search engine

awcodes•2w ago

Well, it’s hard to help without seeing exactly what you are doing, but it seems like you just have some setup out of place, but hard to help without seeing the code as a whole.

o.mOP•2w ago

I understand, sorry I think I might just have to search from different forums but thanks for helping me

awcodes•2w ago

I promise it all works if it’s setup correctly.

o.mOP•2w ago

Hey just wondering why is it causing postcss error? I havent installed postcss Nvm postcss is in the package, I just dont understand the error

awcodes•2w ago

Understood, but thats where it’s difficult to help without seeing all the files involved.

o.mOP•2w ago

HI gont some hint, I got a new error after removing the tailwind/

o.mOP•2w ago

I directly edited at the vendor file Is this code looking for an npm package tailwind?

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'tailwindcss/variants';

@import 'base.css';

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'tailwindcss/variants';

@import 'base.css';

index.css at vendor/filament/filament/resources/css/index.css

o.mOP•2w ago

Is this the case? Because I see no tailwind in my node_modules.

awcodes•2w ago

Why are you modifying vendor files? Stop now.

o.mOP•2w ago

Trying to debug things Finding out why its causing this error and fixing it

awcodes•2w ago

You should never touch vendor files. The problem isn’t in the vendor. It’s in the setup in your app.

Gaming

Programming

Why do I get Unable to locate file in Vite manifest: resources/css/filament/manage/theme.css ?

Did you find this page helpful?