Question

我正在使用react并尝试离线使用材质图标。所以我已经下载了woff文件，并将material.css包含在index.html页面中，但这给了我错误

“ 拒绝应用“ http://localhost:8081/src/assets/materialIcons.css”中的样式，因为它的MIME类型（“ text / html”）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。”

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> -->
  <link rel="stylesheet" type="text/css" href="../src/assets/materialIcons.css">

  <link rel="icon" href="icons/favicon.ico" />

  <link href="icons/apple-touch-icon.png" type="image/png" rel="apple-touch-icon icon shortcut" />
  <link href="icons/apple-touch-icon-60x60.png" type="image/png" rel="apple-touch-icon" sizes="60x60" />
  <link href="icons/apple-touch-icon-76x76.png" type="image/png" rel="apple-touch-icon" sizes="76x76" />
  <link href="icons/apple-touch-icon-120x120.png" type="image/png" rel="apple-touch-icon" sizes="120x120" />
  <link href="icons/apple-touch-icon-152x152.png" type="image/png" rel="apple-touch-icon" sizes="152x152" />

  <title>
    Driver Communication
  </title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

web pack.dev代码如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true,
    historyApiFallback: true
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader'
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  resolve: {
    symlinks: false
  }
};

Answer 1

尝试将CORS或REACT HELMET添加到您的Express APP

拒绝应用'http：// localhost：8081 / src / assets / materialIcons.css'中的样式，因为其MIME

1 个答案: