Filament•5mo 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•5mo 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•5mo 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•5mo ago

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

o.mOP•5mo ago

What happened???

o.mOP•5mo ago

IT should look like better than this 😦

awcodes•5mo ago

What’s off about the second screen shot.

o.mOP•5mo ago

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

awcodes•5mo 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•5mo ago

Acutally no, ill display a better sample

o.mOP•5mo ago

This text should become red, but its still gray

o.mOP•5mo ago

awcodes•5mo 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•5mo ago

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

awcodes•5mo ago

And what is the error?

o.mOP•5mo ago

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

awcodes•5mo ago

Well, you still need that.

o.mOP•5mo ago

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

o.mOP•5mo ago

Output looks like this

awcodes•5mo 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•5mo ago

Yes understood

awcodes•5mo ago

That’s just how tw works.

o.mOP•5mo ago

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

awcodes•5mo ago

Its already installed.

o.mOP•5mo ago

ran npm dev

awcodes•5mo ago

Is this a repo you can share?

o.mOP•5mo 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•5mo 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•5mo ago

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

awcodes•5mo ago

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

o.mOP•5mo 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•5mo ago

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

o.mOP•5mo ago

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

o.mOP•5mo 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•5mo ago

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

awcodes•5mo ago

Why are you modifying vendor files? Stop now.

o.mOP•5mo ago

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

awcodes•5mo 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?