dart-archive / shelf_static

archived repo
https://github.com/dart-lang/shelf/tree/master/pkgs/shelf_static
BSD 3-Clause "New" or "Revised" License
24 stars 24 forks source link

[Question] Refused to apply style. #64

Closed yahu1031 closed 3 years ago

yahu1031 commented 3 years ago

The html loads with no styles. and in inspection console it shows this

Refused to apply style from 'http://localhost:1031/assets/style.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I found no solution and any resource. Hoping for the solution. as of the createStaticFileHandler function says MimeTypeResolver, I really don't understand it. please explain me(us in Docs too) about this.

api.dart

Future<void> main() async {
  /// Router object
  Router app = Router();
  app.get('/assets/<file | .*>',
      createStaticHandler('public', serveFilesOutsidePath: true));
  app.get('/', (Request request, String name) {
    console.log(name);
    String indexFile = File('public/index.html').readAsStringSync();
    return Response.ok(
      indexFile,
      headers: <String, Object>{'Content-Type': 'text/html'},
    );
  });

  /// Serving
  await shelf_io.serve(app, 'localhost', 1031).then((HttpServer value) =>
      console.log(
          'API running at http://${value.address.host}:${value.port} 🔥🔥🔥'));
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlutterMatic</title>
    <link rel="stylesheet" type="text/css" href="./assets/styles.css" />
</head>

<body>
    <h1>Hello world</h1>
</body>

</html>

This is how I'm using it.

kevmoo commented 3 years ago

The css extension is wired up correctly in the mime type resolver. I tested it.

Not sure what's going on.