发表新帖
发表新帖

Stylesheet not loaded because of MIME-type

前端 未结
关注
30 2477
猫巷女王i
猫巷女王i 2020-11-22 07:29

I\'m working on a website that uses gulp to compile and browser sync to keep the browser synchronised with my changes.

The gulp task compiles everything

相关标签:
30条回答
  • 执笔经年
    2020-11-22 07:56

    Bootstrap styles not loading #3411

    https://github.com/angular/angular-cli/issues/3411

    1. I installed Bootstrap v. 3.3.7

      npm install bootstrap --save

    2. Then I added the needed script files to apps[0].scripts in the angular-cli.json file:

      "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
],

// And the Bootstrap CSS to the apps[0].styles array

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
],

    3. I restarted ng serve

    It worked for me.

    0 讨论(0)
  • 我在风中等你
    2020-11-22 07:59

    For a Node.js application, just use this after importing all the required modules in your server file:

    app.use(express.static("."));
    • express.static built-in middleware function in Express and this in your .html file: <link rel="stylesheet" href="style.css">
    0 讨论(0)
  • 被撕碎了的回忆
    2020-11-22 08:00

    One of the main reasons for the issue is the CSS file which is trying to load isn't a valid CSS file.

    Causes:

    • Invalid MIME type
    • Having JavaScript code inside style sheet - (may occur due to incorrect Webpack bundler configuration)

    Check the file which you're trying to load is a valid CSS style sheet (get the server URL of the file from the network tab and hit in a new tab and verify).

    Useful info for consideration when using <link> inside the body tag.

    Though having a link tag inside the body is not the standard way to use the tag. But we can use it for page optimization (more information: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) / if the business use case demands (when you serve the body of the content and server configured to have to render the HTML page with content provided).

    While keeping inside the body tag we have to add the attribute itemProperty in the link tag like 

    <body>
    <!-- … -->
      <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
    <!-- … -->
</body>`

    For more information on itemProperty have a look in https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document.

    0 讨论(0)
  • 忘掉有多难
    2020-11-22 08:01

    For Node.js applications, check your configuration:

    app.use(express.static(__dirname + '/public'));

    Notice that /public does not have a forward slash at the end, so you will need to include it in your href option of your HTML:

    href="/css/style.css">

    If you did include a forward slash (/public/) then you can just do href="css/style.css".

    0 讨论(0)
  • 醉酒成梦
    2020-11-22 08:03

    Comments in your file will trip this. Some minifiers will not remove comments.

    ALSO

    If you use Node.js and set your static files using express such as:

    app.use(express.static(__dirname + '/public'));

    You need to properly address the files.

    In my case both were the issue, so I prefixed my CSS links with "/css/styles.css".

    Example:

    <link type="text/css" rel="stylesheet" href='/css/styles.css">

    This solution is perfect as the path is the main issue for CSS not getting rendering

    0 讨论(0)
  • 夕颜
    2020-11-22 08:06

    Also for others using Angular-CLI and publishing to a sub-folder on the webserver, check this answer:

    When you're deploying to a non-root path within a domain, you'll need to manually update the <base href="/"> tag in your dist/index.html.

    In this case, you will need to update to <base href="/sub-folder/">

    https://github.com/angular/angular-cli/issues/1080

    0 讨论(0)
 看不清?
提交回复
热议问题