如何在React的index.html文件中正确包含css文件?

时间:2017-01-20 03:12:38

标签: javascript html css reactjs jsx

我到处寻找,似乎无法找到答案。我正在使用React构建一个网站,我想要包含一个样式表。我的React应用程序有index.html文件,我在文件中创建了一行:

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

但是React不会加载css。我该怎么做呢?

Sidenote:React也不加载图片。当我在我的JSX中放入一行代码时:

<a href="./my_resume.pdf"><img id="resume" src="./views/icons/resume_logo.png" /></a>

React不会加载图片。请帮忙,我已经在我的桌子上敲了一下关于这一段时间了。

提前致谢。

3 个答案:

答案 0 :(得分:1)

问题可能出在文件的位置以及您引用文件的方式上。例如,my_resume.pdfindex.html位于同一文件夹中吗? homePage.css也在同一个文件夹中吗?

前缀/相对于 root 目录。

前缀./相对于工作目录。

前缀../相对于目录。

有关相对和绝对网址的详细信息,建议您查看有关该主题的Coffee Cup's article

希望这有帮助!

答案 1 :(得分:1)

Cameron Payton! 你可以使用相对路径吗?而是使用绝对路径。 例: http://your-domain/homePage.csshttp://your-domain/views/icons/resume_logo.png

我认为它会对你有所帮助。请回复我。谢谢!

答案 2 :(得分:1)

你的html文件中的

所有你需要做的就是一个普通的链接声明

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/journal/bootstrap.min.css" rel="stylesheet" integrity="sha384-1L94saFXWAvEw88RkpRz8r28eQMvt7kG9ux3DdCqya/P3CfLNtgqzMnyaUa49Pl2" crossorigin="anonymous" />

就像一个人来自一个网站,但你可以用本地的那个做同样的事情,比如

<link src="/styles/maincss.css" rel="stylesheet" /> 

将起作用