如何将 css 加载到我的反应项目中答案

【问题标题】：How to load the css to my react project如何将 css 加载到我的反应项目中
【发布时间】：2017-01-22 18:09:56
【问题描述】：

我是 reactjs 新手，遇到了问题。

我有这样的代码

<body>

    <link href="css/rev_css.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
<!--    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <script src="lib/react.js" type="text/javascript"></script>
    <script src="lib/react.min.js" type="text/javascript"></script>
    <script src="lib/react-dom.js" type="text/javascript"></script>
    <script src="lib/react-dom.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

    <div id="root">
        <!-- This div's content will be managed by React. -->
    </div>

    <script type="text/babel">

      var Counter = React.createClass({
        getInitialState: function () {
          return { count: 0 };
        },
        handleClick: function () {
          this.setState({
            count: this.state.count + 1,
          });
        },
        render: function () {
          return (
            <div class="header">
    <label class="web_name">Revegator</label>
    <input class="search_bar" type="search" placeholder="Search here"/>

    <div class="box">
        <div class="container-4">
            <input type="search" id="search" placeholder="Search here" />
        </div>
    </div>

    <div class="menu_items_div">

        <a class="menu_items">Home</a>
        <a class="menu_items">Profile</a>
        <img class="menu_items" src="img/bell.png" alt=""/>
        <img class="menu_items" src="img/drop.png" alt=""/>
    </div>

</div>
          );
        }
      });
      ReactDOM.render(
        <Counter />,
        document.getElementById('root')
      );
    </script>
</body>

但是这里没有应用css。如何正确加载我的 css 文件？到目前为止，我一直在使用 AngularJS。在角度我可以像这样简单地加载css

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

如何在反应中做到这一点？

【问题讨论】：

如果你把你的链接标签放在头标签里，它有效吗？也许你没有使用html5导致问题

标签： javascript css reactjs

【解决方案1】：

在您的 html 的 TOP 处添加以下行（甚至在 <html> 标记之前）：

<!DOCTYPE html>

然后把<link >标签放在<head>里面。

< head>

   <!-- -->
  <link href="css/rev_css.css" rel="stylesheet" type="text/css" />

</head>

如果不行，说明你使用了错误的路径，所以，如果没有找到css/rev_css.css，请在控制台中检查。

【讨论】：

^ 他说的。您应该在部分加载脚本和 CSS 文件，而不是在