MIME type ('text/html') is not a supported stylesheet :'( | Programação

Bom dia, estou criando uma aplicação para validar senhas e estou tendo problemas para reconhecer o CSS. Toda vez que salvo o arquivo CSS ele aparece, mas quando atualizo a página HTML ele some novamente e aparece o seguinte aviso:

Refused to apply style from 'http://127.0.0.1:5500/validador-de-senhas/style.css/' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema validador de senhas</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="content">
        <form action="">
            <label for="">Senha:</label>
            <input type="password">
            <i class="fa fa-eye icon" id="btn-icon" onclick="showHide()"></i>
        </form>
        <ul class="list">
            <li><i class="fa fa-circle icon "></i>Pelo menos oito caracteres</li>
            <li><i class="fa fa-circle icon "></i>Pelo menos um letra Maiúscula Ex: [A-Z]</li>
            <li><i class="fa fa-circle icon "></i>Pelo menos um letra Minúscula Ex: [a-z]</li>
            <li><i class="fa fa-circle icon "></i>Pelo menos um Símbolo Ex: [$#!&]</li>
            <li><i class="fa fa-circle icon "></i>Pelo menos um número Ex: [0-9]</li>
        </ul>
    </div>
    
<script src="script.js"></script>
   
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: 100px ;
    font-family: "inter", sans-serif;
}

body{
    background-color:rgb(165, 153, 137);
    display:flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.content{
    width: 100%;
    border-radius: 40px;
    max-width: 480px;
    padding: 32px;
    background-color: rgb(138, 112, 79);
    color: white;
}

form{
    position: relative;
    align-items: relative;
    right: 0;
    width: 0;
    color: white;
}

form .icon{
    position: absolute;
    right: -200px;
    height: 12px;
    align-items: middle;
    padding: auto;
    bottom: 16px;
    color:rgb(138, 112, 79);
    cursor: pointer;
}

form label{
    display: block;
    margin-bottom: 8px;
}

form input{
    border-radius: 5px;
    padding: 10px;
    outline: none;
    border: 0;
    font-size: 16px;
}

.list{
    list-style: none;
    margin-top: 24px;
}

.list li{
    font-size: 17px;
    line-height: 30px;
}

.list li .icon{
    font-size: 8px;
    margin-right: 4px;
    vertical-align: middle;
}

Alguém sabe como consigo resolver?

Olá, Yuri! Tudo bem?

Você está enfrentando um problema comum quando se trata de carregar arquivos CSS em sua aplicação HTML, existem várias discussões em fóruns sobre formas de solução para esse tipo de situação, mas não existe uma solução global, logo, depende bastante de qual biblioteca ou Framework você está usando no seu projeto.

Esse erro, geralmente, ocorre quando o servidor não consegue encontrar o arquivo CSS solicitado e retorna uma página HTML de erro em vez disso.

Isso pode ocorrer por alguns motivos, como:

O servidor pode estar configurado para servir apenas arquivos HTML e não arquivos CSS. Nesse caso, você precisaria alterar a configuração do servidor para servir arquivos CSS. Então você pode adicionar a propriedade type no link do arquivo css:
```
<link rel="stylesheet" type="text/css" href="style.css">
```
Dependendo da estrutura do projeto e da biblioteca que você está utilizando, pode ser necessário adicionar a tag que deixarei abaixo, após todos os links de importação.
```
<base href="/">
```

No mais, caso não consiga resolver com essas sugestões que compartilhei, peço que compartilhe comigo todo o seu projeto, de preferência, pelo GitHub, mas não será um problema se compartilhar via Google Drive.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

Mergulhe em programação