Giters

withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!

Home Page:https://astro.build

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Refuse to apply style because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

JenuelDev opened this issue · comments

commented

Astro Info

Astro                    v4.11.5
Node                     v20.15.0
System                   Windows (x64)
Package Manager          pnpm
Output                   server
Adapter                  @astrojs/netlify
Integrations             unocss

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Hi! I am using UnoCss for astro, its working properly on my local but then when I deploy it in netlify its showing this error.

What's the expected result?

It should able to apply the css file generated by unocss.

Link to Minimal Reproducible Example

https://believerssword.netlify.app/

Participation

  • I am willing to submit a pull request for this issue.
commented

Hello @JenuelDev. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

commented

Can you please share "this error"?

commented

Can you please share "this error"?

If you open this website https://believerssword.netlify.app/ and you open console you will be able to see the error. The project is SSR. Its just a simple hello world to test it out if its working. Here is the repo: https://github.com/Bible-Projects/believers-sword-next/tree/main/web-next

I am using astro + unocss by following the unocss installation process on their website. Its working properly on my local when doing pnpm dev. But when deployed on netlify I am having problem.

In the html astro generated a link: /_astro/index.BIRhkVPq.css, But this is not working
image

But If I access the css, by adding dist on it I can access the css file: https://believerssword.netlify.app/dist/_astro/index.BIRhkVPq.css

I was able to fix it by adding base to astro.config.mjs file.

import { defineConfig } from 'astro/config';
import UnoCSS from 'unocss/astro';
import netlify from '@astrojs/netlify';

// https://astro.build/config
export default defineConfig({
    output: 'server',
    integrations: [
        UnoCSS({
            injectReset: true,
        }),
    ],
    adapter: netlify(),
    base: '/dist/', // added this
});

Am I going to have a problem with this one in the future? I dont want to have problem in the future specially when project becomes big.

THIS IS THE SCARY PART

Also I was wondering why I can able to open the files on the project. I think this can be a security risk. I set it as a server for the reason that this files should not be accessed. If this can be configured, why is it not set as default?
image
image

commented

I was able to solve this It seems its an error on my side, for people having this issue. To fix this you have to specify the the dist for published directory specially if your project in a sub directory of your repo. Its very important you check this because if you dont, people can access your repo files
image