web-dev-qa-db-fra.com

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 au problème qui comprend. donnant le type pour <link rel="stylesheet" href="./style.css" /> l'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 cela.

index.js:

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'))

index.html:

<!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>

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:

"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"
  },

npm strat fonctionne bien, l'application fonctionne bien, mais lorsque je lance npm run build, cela me donne l'erreur:

**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.**

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 !!

javascriptcssreactjswebpackmime-types
6
Raman Mishra

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 HtmlWebpackLinkTypePlugin qui devrait insérer le type MIME dans le fichier CSS.

/// 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'
  })
];

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

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

Juste une note 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
Stuart Nichols

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
ColemanTO