javascript - 为什么 Reactjs 应用程序将 css 文件类型视为“文本/html”

问题描述

我正在尝试将 css 文件应用到应用程序中，但由于我收到的错误表明工作表由于其 MIME 类型而被拒绝 - 不知何故，它被读取为“文本/html”。

到目前为止我已经尝试过：

将里面的工作表定义index.html为<link type="text/css" rel="stylesheet" href="zoom_main.css" /> <link type="text/css" rel="stylesheet" href="zoom_form.css" />
将 css 文件移动到src文件夹中并从 index.js （入口点）导入它们
使用PUBLIC_URL <link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/zoom_form.css" />

UseStyles.js

const UseStyles = stylePath => {
  useEffect(() => {

    const head = document.head;
    const link = document.createElement("link");

    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = stylePath;

    head.appendChild(link);

    return () => {
      head.removeChild(link);
    };
  }, [stylePath]);

  return stylePath;
};

export default UseStyles;

ZoomContainer.js

const PATH = {
  formCssUrl: "zoom_form.css",
  mainCssUrl: "zoom_main.css"
};

const zoomConfig = {
  apiKey: "",
  apiSecret: "",
  userName: "",
  userEmail: "",
  leaveUrl: "https://zoom.us/",

  meetingNumber: "",
  passWord: "",
  role: 0
};

const ZoomContainer = () => {
  const [isSubmitted, setIsSubmitted] = useState({
    stylePath: PATH.formCssUrl,
    status: false
  });
  console.log(PATH);
  const { stylePath } = isSubmitted;

  const handleSubmit = e => {
    e.preventDefault();

    setIsSubmitted({
      stylePath: PATH.mainCssUrl,
      status: true
    });
  };

  UseStyles(stylePath);

  return (
    <div className="App">
      <button onClick={handleSubmit}>Start Meeting</button>
      <Zoom isSubmitted={isSubmitted} meetConfig={zoomConfig} />
    </div>
  );
};

export default ZoomContainer;

index.js

const { persistor, store } = configureStore();
render(
  <ReduxProvider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </ReduxProvider>,
  document.getElementById("root")
);

serviceWorker.unregister();

index.html（在公用文件夹中找到）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <link
      type="text/css"
      rel="stylesheet"
      href="node_modules/@zoomus/websdk/dist/css/react-select.css"
    />
    <link
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link
      type="text/css"
      rel="stylesheet"
      href="https://source.zoom.us/1.7.9/css/react-select.css"
    />
    <script src="https://source.zoom.us/1.7.9/lib/vendor/jquery.min.js"></script>
    <script src="https://source.zoom.us/1.7.9/lib/vendor/lodash.min.js"></script>

    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <title>Tena</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

webpack.common.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader", "eslint-loader"]
      },
      {
        test: /(\.(css|scss))$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true // true outputs JSX tags
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: "file-loader",
        options: {
          name: "[name].[ext]"
        }
      }
    ]
  },
  resolve: {
    extensions: [".webpack.js", ".web.js", ".ts", "*", ".js", ".json"]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "Tena",
      template: "./public/index.html"
    })
  ],
  output: {
    path: path.resolve(__dirname, "../", "build"),
    publicPath: "/",
    filename: "bundle.js"
  },

  devServer: {
    stats: "minimal",
    overlay: true,
    historyApiFallback: true,
    disableHostCheck: true,
    headers: { "Access-Control-Allow-Origin": "*" },
    https: false
  }
};

包.json

{
 ...
  "scripts": {
    "start": "webpack-dev-server --config build-utils/webpack.config.js --env.env=dev --port 3000",
    "build": "webpack --config build-utils/webpack.config.js --env.env=prod",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
 ...
}

标签： javascriptreactjs

javascript - 为什么 Reactjs 应用程序将 css 文件类型视为“文本/html”

问题描述

解决方案

推荐阅读