在单独的文件夹中时,CSS文件未正确链接到html

时间:2019-06-25 05:46:17

标签: html css

我无法将CSS文件链接到index.html。如果它在同一个文件夹中,那么它将起作用,但是如果我将CSS文件移动到一个文件夹上方,即使使用../表示法,它似乎也会失败。这是带有文件目录设置的代码图。 Seperate Folder

“ ../ src / index.css”不是要增加文件夹,然后在src /下找到文件吗?

5 个答案:

答案 0 :(得分:1)

使用/符号开始路径,每次都将使用绝对URL。也就是说,使用href="/src/App.css"但是,您似乎使用的是框架,而不是纯HTML / CSS。如果将文件编译到实际的Web应用程序中,则需要将路径用于最终输出,而不是源位置,但是框架会为此提供变量,您可以将其粘贴到路径的开始而不是/

(使用诸如../之类的相对路径的问题是,您必须更改文件层次结构中每个不同级别的路径,这是导致不一致和错误的秘诀。绝对路径是相同的应用中的每个文件。)

答案 1 :(得分:0)

使用此命令将index.css文件放入公共文件中并将其添加到index.html文件中

<link rel="stylesheet" href="%PUBLIC_URL%/../style.css" />

您不能将文件放在根目录下并通过index.html进行链接。但是,通过添加单独的组件来尽最大可能地对样式做出反应。

答案 2 :(得分:0)

摆脱./并从../开始

../ will take you to the root of your project and the you can traverse to the required file from there.

<link rel="stylesheet" href="../path-to-file.css" />

答案 3 :(得分:0)

您是否正在使用静态服务器运行index.html文件?如果是,则转到根目录并运行

static-server -i ./public/index.html

-i用于手动提供索引文件。

如果在公共文件夹中运行static-server,则不会从根目录中获取CSS。请将href保留为“ ../index.css”。可以。

答案 4 :(得分:0)

看起来您使用的是react和create-react-app正确吗?如果是,则无法从该文件夹中访问该文件夹之外的任何内容,因为react环境是使用公用文件夹作为唯一可公开访问的文件夹构建的。

因此,这是放置img文件夹及类似内容的好地方。您在这里有2个选择。您可以将全局css文件放在公用文件夹中,然后从html文件链接到该文件。您也可以在公用文件夹中创建一个css文件夹来存储您的css文件。

或者大多数人只是将css文件导入组件中。因此,对于全局CSS,您可以将其导入index.js或app.js文件中,如下所示:

import './index.css'

但是尝试访问从公用文件夹中的文件到公用文件夹之外的文件的任何内容都是不可行的。