I'm using react/webpack to run a development server on local 8080. This is something I don't quite understand yet and I've run into this problem before. Bootstrap is being linked in the HTML and is running fine. However, when I link the stylesheet, the console is giving me an error of 404 not found for my stylesheet.
Here is my HTML boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="public/stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Index.html and Index.js are at the root level, and so is the /Public directory, which only contains one file: stylesheet.css.
Why is stylesheet.css not loading in the browser when I run the local server and how do I fix this? Thanks.
if your sharing out the public folder with express like so
app.use(express.static(path.join(__dirname, 'public')));
then you do not need to have 'public' in the source.
in other words this
<link rel="stylesheet" href="public/stylesheet.css" />
should be this
<link rel="stylesheet" href="/stylesheet.css" />
Related
I've just started using astro and have been finding a weird behavior when building my site. Specifically, although the build process creates a .css file in an assets folder and that is linked in the resulting .html file, my browser does not recognize the presence of this folder of .css file.
My index.astro looks like this:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
<style> body {color: red;}</style>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
The resulting directory structure from npm run build is the following:
dist/assets/index.css
dist/index.html
Where index.html looks like the following:
<!DOCTYPE html>
<html lang="en" class="astro-5LR5QOZY">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Astro v1.7.2">
<title>Astro</title>
<link rel="stylesheet" href="/assets/index.css" />
</head>
<body class="astro-5LR5QOZY">
<h1 class="astro-5LR5QOZY">Astro</h1>
</body>
</html>
And index.css has one line, body {color:red;}. When I open index.html in Chrome, styling is plain and assets is not found within the directory structure:
Any help?
I've tried using type="text/css" and that didn't fix the problem.
It looks like you are double clicking the index.html file to view the file locally in your browser using the file:// protocol but websites are meant to be served from a server to view them properly using http:// | https://, Astro provides the npm run preview command which will run a server locally for you to view your build in /dist at http://127.0.0.1:3000/
I am trying to link my css to my vue.js file. I was building this out without the webpack. So I had many style worked out.. However, when I decided to move it to a webpack none of my custom css is even calling. I did research that said to include the css in the index.html as a link so that is what I have done. Is there a better way to do this that I didn't see? Any help would be much appreciated. It is also worth mentioning that I tried to use Include in the App.vue as well as require as I had seen in other suggestions but both pulled up errors and refused to compile any of my files....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<link rel="stylesheet" type="text/css" href="../src/assets/css/main.css">
<title>my-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<p>this is test script</p>
<!-- built files will be auto injected -->
</body>
</html>
Here is my root HTML file. As you can see, it has no problem getting styles from Bootstrap (this functionality is working just fine). When I open up index.html in the browser at localhost:8080 (running a server through a webpack command), It cannot find the stylesheet! This is something I don't understand. Please help. Thank you.
BTW.. stylesheet.css is at the same directory level as index.html AND index.js. How come the bootstrap stylesheet is getting picked up but not my stylesheet?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Meteor automatically loads all style sheets. I've seen it recommended to put them in the /client/stylesheets, or /imports/ui/css folder.
You don't have need to put <link rel="stylesheet" href="stylesheet.css" /> . Try removing that line and see if you can see your styles applied to your page.
The reason <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> is working for you is because it is loading from an external address. It is hard-coded on your html and not being managed by meteor. I don't recommend it, but if you wanted to do the same thing with your style sheet, you would put it in the /public folder, and use <link rel="stylesheet" href="/stylesheet.css" />. But Meteor is designed to manage all the style sheets for you, so best not to do this.
Lastly, if you want to control the order style sheets are imported, you can specify import '/client/stylesheet.css'; // import CSS from absolute path - see here for clarity: https://guide.meteor.com/structure.html#intro-to-import-export
I am using semantic ui, and the html works fine on my pc. When I upload it and run my site from the internet, it looks like the normal html is working, but sematic specific functionality is missing. Is it not getting the semantic .css or something? I'm a bit new to this, so if you could help me debug I would be be grateful.
I am using Semantic version 1.8.1.
My html is located relative to all the source files in the same way as the examples which come with the release in the /examples directory. So I access the file relatively such as "../dist/semantic.css"
Here is the head section of the default.htm main html page.
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Spin Boogie</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="kitchensink.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<!-- Used with Tab History !-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.min.js"></script>
<script src="../dist/semantic.js"></script>
</head>
I am PHP programmer now. And I am writing new project. When I want to load file using:
<!DOCTYPE html>
<html>
<head>
<base href="http://quest.my/" />
<title>Quest The Game</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<script type="text/javascript" src="src/js/jquery.js"></script>
</head>
But it is not working! It have to wark. I have my own virtal-host quest.my with directory /style/ with file main.css.
Can you help me? I am idiot?
try like this:
<!DOCTYPE html>
<html>
<head>
<title>Quest The Game</title>
<link rel="stylesheet" type="text/css" href="http://quest.my/style/main.css" />
<script type="text/javascript" src="http://quest.my/js/jquery.js"></script>
</head>
You need to use /style/main.css (note the leading /). That will cause the path to be relative to the root of the document (which will then refer to your <base/> tag). Right now it's a relative path, and therefore relative to the location the page was served from.