反应教程没有加载base.css

时间:2016-02-25 18:28:26

标签: css reactjs

我在使用React教程时遇到了麻烦。在stackoverflow的一些帮助下,我能够运行服务器/ API,但现在由于一些奇怪的原因,base.css没有加载。

base.css位于css文件夹中,当我在Dreamweaver中进行编辑时,它会自动加载base.css,所以我真的很困惑。

enter image description here

这是我的index.html

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>React Tutorial</title>
        <!-- Not present in the tutorial. Just for basic styling. -->
        <link rel="stylesheet" href="css/base.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
      </head>
      <body>
        <div id="content"></div>
        <script type="text/babel">

        var Comment = React.createClass({
            render: function() {
                return (
                    <div className="comment">
                        <h2 className="commentAuthor">
                            {this.props.author}
                        </h2>
                            {this.props.children}
                    </div>
                )
            }
        });

          var CommentList = React.createClass({
              render: function() {
                return (
                  <div className="commentList">
                    <Comment author="Pete Hunt"> This is one comment</Comment>
                    <Comment author="Jordan Walke"> This is another comment</Comment>
                  </div>
                );
              }
            });

            var CommentForm = React.createClass({
              render: function() {
                return (
                  <div className="commentForm">
                    Hello, world! I am a CommentForm.
                  </div>
                );
              }
            });

          var CommentBox = React.createClass({
          render: function() {
            return (
              <div className="commentBox">
              <h1>Comments</h1>
                <CommentList />
                <CommentForm />
              </div>
            );
          }
        });



        ReactDOM.render(
          <CommentBox />,
          document.getElementById('content')
        );

        </script>
      </body>
    </html>

1 个答案:

答案 0 :(得分:0)

问题是我需要在.css文件引用中添加一个前导斜杠。

成了

加载了css并将其应用于页面。