I am using grunt-ngdocs to document my Angular project. But the demo Plunker code (generated automatically) doesn't include the CSS file.
My configuration in Gruntfile.js includes:
...
scripts: [
'https://code.jquery.com/jquery-2.1.4.js'
],
styles: [
'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.css'
]
...
In my JS src file:
#example
<example module="sui.checkbox">
<file name="index.html">
...
</file>
<example>
On the API page, the JS and CSS files are loaded correctly. However the displayed demo source code doesn't include the CSS file:
<!doctype html>
<html ng-app="sui.checkbox">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="app.js"></script>
<!-- semantic.css should be imported here -->
</head>
<body>
...
</body>
</html>
On my API page, the demo works well. But linking to Plunker doesn't produce desired result, because the CSS including line is not there. Any suggestions?
Use a temp solution. Add the following line inside the javascript files #example section:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.css">
Related
<!doctype html>
Multi Level Dropdown
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
...................
<script type="text/javascript" src="scripts.js"></script>
it is hard to understand your problem based on the context you gave. Consider to be more precise and share all of your code. However a couple of ideas:
Your <script> tag should be placed within the <body> ... </body> tag
Use <script type="text/javascript" src="./scripts.js"></script>
Check/ confirm whether your stylesheet "style.css" is working
Check for valid javascript code by testing with simple code such as alert('Test'); in your scripts.js file
My company added an Angular app to the existing ASP.NET MVC project last year. The Angular index host webpage is a .cshtml file that contain razor code, eg #RenderSection("SharedCss", false) .
It works fine until we upgrade to Angular 12 last week. When build the Angular app with optimization option ( ng build --optimization ), the output index.cshtml file is modified erroneously.
Original index.cshtml file
<!DOCTYPE html><html lang="en">
<head>
<base href="/">
<!-- razor code start-->
#RenderSection("SharedCss", false)
<!-- razor code end-->
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Expected result
<!DOCTYPE html><html lang="en">
<head>
<base href="/">
<!-- razor code start-->
#RenderSection("SharedCss", false)
<!-- razor code end-->
<style>:root{--blue:#007bff;.........</style>
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
<app-root>Loading...</app-root>
<script src="runtime-es2015.js" ............ </script>
</body>
</html>
Erroneous result
<!DOCTYPE html><html lang="en">
<head>
<base href="/">
<!-- razor code start-->
</head><body>#RenderSection("SharedCss", false)
<!-- razor code end-->
<style>:root{--blue:#007bff;.........</style>
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
<app-root>Loading...</app-root>
<script src="runtime-es2015.js" ............ </script>
</body>
</html>
The </head><body> html is erroneously moved to before the razor code (see line between <!-- razor code start--> and <!-- razor code end-->). It seems during the build optimization process, when Angular cannot parse the unexpected html syntax (eg. razor code) in the head tag, then it would append the </head> tag to end the html head element.
Note:
To eliminate the upgrade factor, I create new empty Angular app, and the issue still exist.
this occurs after Angular 12+
I have not be able to find anyone mention this behavior/issue. I would still want to turn the optimization flag on when build for production environment. Please help!
My colleague found the workaround solution base on this stack overflow post
We apply the same fix by disabling the inlineCritical option.
here is an example workspace configuration
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
}
I'm very beginner to HTML and CSS. I tried to add css with my external file. But It's the error as unexpected token. Please find the error in image file. My code is as like below.
<html>
<head>
<title>Test Game</title>
<script src="C:\Users\Pspl\Desktop\Sreekanth\TestGame.css"></script>
</head>
<body>
<div class='dvborder'>dsfssd</div>
</body>
</html>
css file code :
body {
background-color: lightblue;
}
You must use <link> instead of <script>.
<link> - is for embedding external CSS file while
<script> - is for embedding external JS file
<link rel="stylesheet" type="text/css" href="C:\Users\Pspl\Desktop\Sreekanth\TestGame.css">
Use <script> for .js files and <link> for .css files.
Try link tag instead of script tag.
<link rel="stylesheet" type="text/css" href="theme.css">
That's simply not at all how you link to css. The syntax for style sheets is
<link rel="stylesheet" href="(URL of your .css)" />
The browser is expecting a javascript file, and complaining that CSS doesn't look like javascript.
<link> tag is used to relate stylesheets or linked documents.
<script> is used to embed an executable script within an HTML.
If you are having local files, try to use relative path for stylesheets and script files. This improve portability.
I am using the elm-live dev server but I do not know how to use an external CSS file. According to documentation, I can use the following code below, but where do use that snippet of code? If i use it in the index.html it still gets overwritten on when i save my *.elm files.
Thanks
elm-live states:
$ cat <<——— > index.html
<!doctype html>
<link rel="stylesheet" href="style.css" />
<body>
<div></div>
<script src="elm.js"></script>
<script>Elm.Main.embed(document.querySelector("div"));</script>
</body>
———
$ elm-live Main.elm --output=elm.js --open
I'm trying to use an HTML file with CSS throught this code:
<link rel="stylesheet" type="text/css" href="myfile.html" />
I cannot access to the server and make new files so the server provides the option to create HTML files and I wanna use them as CSS hosts. Is this possible?
you can try to include the html containing css in the other html so myCssfile.html is :
<style>
//enter CSS code here
</style>
and then your main html file:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("myCssFile.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
I'm using here the JQuery function .load but it probably can be done with pure JS
If the file contents are valid CSS and the type attribute is set correctly, then the browser will believe you that it's a CSS file and will parse/use it as such.