9
votes

Le type MIME ('text / html') n'est pas un type MIME de feuille de style pris en charge

J'ai essayé presque toutes les solutions pour le problème qui comprend. donner le type pour <link rel="stylesheet" href="./style.css" /> utilisation de app.use(express.static('public')) et bien d'autres mais il semble que je ne suis pas en mesure de trouver une solution pour ça.

index.js:

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

**Refused to execute script from 'http://localhost:9000/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.**

index.html:

"scripts": {
    "start": "webpack-dev-server --content-base dist/ --port 9000 --config webpack.config.js --watch --progress --inline --hot --history-api-fallback --mode development",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  },

webPack.config.js:

'use strict';
const webpack = require('webpack');

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

const plugins = [
  new CleanWebpackPlugin({
    root: __dirname,
    verbose: true,
    dry: false
  }),
  new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
  new MiniCssExtractPlugin({ filename: "style.css", allChunks: false }),
  new CopyWebpackPlugin([
    { from: './src/index.html', to: 'index.html' },
  ]),
  new webpack.ProvidePlugin({
    Promise: 'es6-promise-promise',
    'React': 'react'
  }),
  new HtmlWebpackPlugin({
    template: './src/index.html'
  })
];

module.exports = {
  entry: ['@babel/polyfill', "./src/index.js"],
  output: {
    path: __dirname + '/dist',
    filename: "bundle.js",
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      //load styles
      {
        test: /\.(sass|less|css)$/,
        use: [
          { loader: 'style-loader' },
          { loader: MiniCssExtractPlugin.loader },
          { loader: "css-loader", options: {} },
          {
            loader: "postcss-loader",
            options: {
              ident: 'postcss',
              plugins: [
                require('autoprefixer')({
                  'browsers': ['> 1%', 'last 2 versions']
                }),
              ]
            }
          },
          { loader: "less-loader", options: {} }
        ]
      },

      // Load images
      {
        test: /\.jpg/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10000,
            mimetype: "image/jpg"
          }
        }]
      },
      {
        test: /\.gif/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10000,
            mimetype: "image/gif"
          }
        }]
      },
      {
        test: /\.png/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10000,
            mimetype: "image/png"
          }
        }]
      },

      // Load fonts
      {
        test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10000,
            mimetype: "application/font-woff"
          }
        }]
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [{
          loader: "file-loader"
        }]
      },
      {
        test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10000,
            mimetype: "application/font-woff"
          }
        }]
      }
    ]
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.jsx', '.less', '.css'],
    modules: ["src", "node_modules"]
  },
  devServer: {
    compress: true,
    disableHostCheck: true,   // That solved it
  }
}

Balise de script package.json:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <meta charset=utf-8>
  <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>XYZ</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <div id="my-app"></div>
  <script type='text/javascript' src="./bundle.js"></script>
</body>

</html>

npm strat fonctionne bien, l'application fonctionne correctement, mais quand je fais npm run build, cela me donne l'erreur:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux'
import "./assets/styles/app.less";
import 'bootstrap/dist/js/bootstrap.js';
import App from './components/base/App';
import store from './store'

const provider =
  <Provider store={store}>
    <App />
  </Provider>

render(provider, document.getElementById('my-app'))

Dans la partie réseau, j'ai obtenu ce qui suit:

Ok response for : http://localhost:9000/bundle.js

cancled for : http://localhost:9000/style.css

Aidez-moi !!


4 commentaires

Pouvez-vous ouvrir l'URL du style dans un onglet et voir ce qu'elle montre?


Non, en fait, je ne peux pas ouvrir l'URL de style car cela me donne une annulation.


Même dans un onglet de navigateur ordinaire? Copiez et collez l'URL dans un nouvel onglet.


Oui, dans le navigateur régulier dans Chrome ainsi que dans IE, même j'ai essayé en mode incognito aussi.


3 Réponses :


0
votes

Je crois que le problème est dû au fait que HtmlWebpackPlugin ne fournit pas le type MIME pour le fichier css qui a été injecté avec le MiniCssExtractPlugin. J'ai réussi à résoudre le problème en utilisant le HtmlWebpackLinkTypePlugin qui devrait insérer le mimetype dans le fichier css.

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

Cela devrait donner à votre ligne de feuille de style injectée l'aspect suivant:

/// top of file
const LinkTypePlugin = require('html-webpack-link-type-plugin').HtmlWebpackLinkTypePlugin;

....

const plugins = [
  new CleanWebpackPlugin({
    root: __dirname,
    verbose: true,
    dry: false
  }),
  new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
  new MiniCssExtractPlugin({ filename: "style.css", allChunks: false }),
  new CopyWebpackPlugin([
    { from: './src/index.html', to: 'index.html' },
  ]),
  new webpack.ProvidePlugin({
    Promise: 'es6-promise-promise',
    'React': 'react'
  }),
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
  new LinkTypePlugin({
    '*.css' : 'text/css'
  })
];

Notez simplement que la règle * .css est un glob, donc si votre fichier css est hébergé dans un répertoire sous votre racine, vous devrez ajouter quelque chose comme ** / *. Css comme règle.

J'espère que cela répond à votre question.


0 commentaires

11
votes

J'ajoute une deuxième réponse parce que je pense qu'il pourrait y avoir un problème différent. Je pense que l'erreur de type MIME pourrait être due au fait que le chemin css n'est pas correct. Je pense qu'il essaie de servir une erreur au lieu du fichier css qui ne correspond pas au type MIME. Essayez de supprimer la ligne suivante de votre modèle HTML et autorisez HtmlWebPackPlugin à l'injecter automatiquement.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="home_container">
</body>

</html>

Vous trouverez ci-dessous mes propres modèles webpack.config et index.html qui, j'espère, vous aideront.

webpack.config

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LinkTypePlugin = require('html-webpack-link-type-plugin').HtmlWebpackLinkTypePlugin;
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/index.tsx',
    output: {
        filename: 'app/main.js'
    },
    devServer: {
        contentBase: './',
        watchContentBase: true
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {

                        }
                    },
                    "css-loader",
                    "resolve-url-loader",
                    {
                        loader: "sass-loader?sourceMap",
                        options: {
                            includePaths: [
                            ],
                            sourceMap: true
                        }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.tsx?$/,
                use: {
                    loader: 'babel-loader'
                },
                exclude: /node_modules/
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    publicPath: "./",
                    outputPath: "app"
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './app/style.css',
        }),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new LinkTypePlugin({
            '**/*.css' : 'text/css'
        }),
        new CopyPlugin([
            { from: 'assets', to: 'assets' }
        ])
    ]
};

index.html

<link rel="stylesheet" href="./style.css" />


1 commentaires

J'ai eu le même problème et c'était comme vous l'avez dit - si le chemin d'accès au fichier CSS est incorrect (ou, comme dans mon cas, devServer.contentBase est faux), vous verrez à la place l'avertissement de type MIME. Cela se produira même sur un projet minimal, sans plugins. On dirait que le serveur de développement renvoie une réponse HTML (qui dit "Cannot GET / foo") pour tout 404.



6
votes

Vous pouvez essayer d'ajouter la propriété type:

<link type="css" rel="stylesheet" href="src/node_modules/bootstrap/dist/css/bootstrap.css" crossorigin="anonymous">


0 commentaires