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/
Related
I compiled a vuejs app with npm run build and when viewing the result in firefox the CSS does not display. It does load in the network tab and it shows under the style editor but says "0 rules". Everything loads fine when running npm run serve in development.
If I copy the style text and paste it over itself the style loads properly
This is the HTML for my app
<!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">
<link rel=icon href=/favicon.ico>
<title>frontend</title>
<link as=style href=/css/app.36bb3a4e.css rel=preload>
<link as=style href=/css/chunk-vendors.baa7246e.css rel=preload>
<link as=script href=/js/app.fcf42d91.js rel=preload>
<link as=script href=/js/chunk-vendors.ea5cf647.js rel=preload>
<link href=/css/app.36bb3a4e.css rel=stylesheet>
<link href=/css/chunk-vendors.baa7246e.css rel=stylesheet>
</head>
<body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id=app></div>
<script src=/js/app.fcf42d91.js></script>
<script src=/js/chunk-vendors.ea5cf647.js></script>
</body>
</html>
What could be causing this and how can I fix it?
Found out nginx was serving the css file with the content type text/plain instead of text/css. Adding include /etc/nginx/mime.types; to the location block fixed it.
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" />
I currently have this as my base template, but depending on the route (using this as router)
, it has to switch out the css for another one, I tried but couldn't find a way to do this.
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css" />
<Title>Title</Title>
</head>
<body>
<div id="render-target"></div>
</body>
You cannot control the css file in meteor, because when the server starts, all the css files will be merged into one file. In order to define a css for a particular module, it would be better to use less or sass to define the namespace
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've just begun to use Aptana Studio 3. I used Aptana 2 in school and it worked fine. However in Studio 3, I can't get my external css to link to my XHTML document. I've tried using absolute path, the commented part of the code. With HTML traditional doc type the css links to the document just fine. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>We Rent Checkers</title>
<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\Owner\My Documents\Aptana Studio 3
Workspace\We Rent Checkers\rent_checkers.css" media="screen" charset="UTF-8" />
<!--<style type="text/css" media="screen">
#import url(rent_rheckers.css);
</style> -->
</head>
try to point to your CSS, where it is located relative to your XHTML, if they are in the same folder:
<link rel="stylesheet" type="text/css" href="rent_checkers.css" media="screen" charset="UTF-8" />
never use a file location like c:\
if it is in a folder (like 'css') next to your XHTML:
<link rel="stylesheet" type="text/css" href="css/rent_checkers.css" media="screen" charset="UTF-8" />
before doing that, go to the folder where your html file is located, then create folder with name "css" in same folder. this is how people link external file with each other. you don't need to give exact path/complete path of file. Relevant path works better, as it works when you upload it on online server, reply for more question and clarification.