[CSS使用React和SemanticUI在HTML之后加载

Question

我有一个使用SemanticUI进行样式设置的create-react-app项目。我的应用程序组件如下：

import React from 'react';
import './App.css'

import { LandingComponent } from '../components/landing/LandingComponent/index'
import { LoginComponent } from '../components/login/LoginComponent/index'
import { DashboardComponent } from '../components/dashboard/DashboardComponent/index'
import { MenuComponent } from '../components/menubar/MenuComponent/index'
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

const App: React.FC = () => {
  return (
    <>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />
      <MenuComponent />
      <Router>
        <Route exact path="/" component={() => <LandingComponent />} />
        <Route exact path="/login" component={() => <LoginComponent />} />
        <Route exact path="/dashboard" component={() => <DashboardComponent />} />
      </Router>
    </>
  );
}

export default App;

[每当我在开发模式下工作时，我就能在样式启动前几秒钟内看到原始HTML。我认为在使用npm run build构建优化的版本之后，可以解决此问题>

但是，在生产版本中，我遇到了同样的问题。我正在阅读其他遇到相同问题的人的文章，其中一些建议使用mini-css-extract-plugin

。但是，我想知道是否有解决方案，而没有在我的项目中添加任何其他插件？

我有一个使用SemanticUI进行样式设置的create-react-app项目。我的App组件如下：从'react'导入React； import'./App.css'从'../ components / ...

Answer 1