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
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.
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.
Can you please share "this error"?
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
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?
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