how to import less css file into html head - html

I have a CSS LESS file, and it include css less code. I am trying to import it into my html file, in the head, like so:
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
<script src="./script.js"></script>
</head>
However, the css is not processing, and there is no css showing up all just non-css stuff on the html page.
am i importing it wrong?

I don't know what's in you less.js file, but in case less.js is a script to compile your less file, you have to put it before the link tag in your head.
<head>
<script src="less.js" type="text/javascript"></script>
<script src="./script.js"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
</head>

Related

Why is my scripts.js file not connected? They are in same folder, the name is 'scripts' not 'script'. Script is after the body in index.html

<!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

Bootstrap 4 loading error in console why?

I am trying to study bootstrap-4 and that's will work but take the inspect element and show error in console like
Uncaught TypeError: Cannot read property 'fn' of undefined at setTransitionEndSupport
Why this type error show when I am loading css file like
<link rel="stylesheet" href="sourcz/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap-grid.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap-grid.min.css" type="text/css">
and js file are
<script type="text/javascript" src="sourcz/js/bootstrap.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.bundle.min.js"></script>
any way to slove this issue ? or loading problem !!
You need to load jquery first before bootstrap's js. And don't use minified, uncompressed file together. Use one of those.
css files like:
<link rel="stylesheet" href="sourcz/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap-grid.min.css" type="text/css">
js files like:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.bundle.min.js"></script>

Why does my html import tag not work?

I have been looking at code reusability (for example) and have been experimenting with HTML import tags. I want to auto include my bootstrap code in every webpage and would like to do it with one line of code as opposed to multiple.
After doing some research online, the answer seemed to be to use the tag, most namely the following format:
<head>
<import rel="import" href="includes/bootstrap.html">
</head>
My bootstrap.html file is just some normal bootstrap links as follows:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I'm simply trying to avoid importing the same three lines across all my pages. However, my browser (Chrome) does not seem to implement include in any way, even when I use for reasons other than Bootstrap.
How should I properly include my bootstrap files across the head of all my pages?
Alex
Change import tag to link tag
<head>
<link rel="import" href="includes/bootstrap.html">
</head>
Refer this
How about creating a header file 'header.php' with the links like so,
<head>
<title>Your Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</head>
And when you write your code just include the header.php part.
<html>
<? include ("header.php");?>
</html>

How to automatically add JS/CSS to HTML files?

Is there a way to have Webpack scan Javascript files for require("file.js") and require("file.css") and insert <script type="text/javascript"> and <link rel="stylesheet"> (respectively) to any HTML file that includes the root Javascript file?
For example. Given:
Main.html
<html>
<head>
<script type="text/javascript" src="main.js"></script>
[...]
Main.js
require("./login.js");
require("./login.css");
I expect to get this output:
Main.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css"/>
<script type="text/javascript" src="login.js"></script>
<script type="text/javascript" src="main.js"></script>
[...]
Bonus points: ability to require("login.scss") and end up with <link rel="stylesheet" type="text/css" href="login.css"/> (meaning, take into consideration the fact that SCSS files will get converted to CSS).
According to the author of Webpack, this feature does not exist yet.
I have filed this feature request: https://github.com/webpack/webpack/issues/754
i have created a little python script that allows me to import files(.js, .css, .younameit) from a directory to the html.
before:
<html>
<head>
<!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
</head>
after:
<html>
<head>
<script src="../tsc_out/script1.js"></script>
<script src="../tsc_out/script2.js"></script>
<script src="../tsc_out/script3.js"></script>
<script src="../tsc_out/script4.js"></script>
<script src="../tsc_out/script5.js"></script>
</head>
https://github.com/seven-jerry/html-importer

stylesheet does not work after publishing

<link type ="text/css" href="../../Content/jquery.treeview.css" rel="Stylesheet" />
<link type ="text/css" href="../../Content/screen.css" rel="Stylesheet" />
<script src="/../../js/jquery.js" type="text/javascript"></script>
<script src="/../../js/jquery.cookie.js" type="text/javascript"></script>
<script src="/../../js/jquery.treeview.js" type="text/javascript"></script>
i am working with mvc. i have these css and js links in my view. it works perfectly when i work on localhost. but after publishing, it seems like these css or js files does not work. i checked authorization settings of these files and there is nothing wrong.
Try using
<link type="text/css" href="#Url.Content("~/content/jquery.treeview.css")" rel="Stylesheet"/>
Instead of giving path like this. i think you should provide the full path. After giving the full path, it will work everywhere.
<link type ="text/css" href="http://www.domain.com/Content/jquery.treeview.css" rel="Stylesheet" />
<link type ="text/css" href="http://www.domain.com/Content/screen.css" rel="Stylesheet" />
<script src="http://www.domain.com/js/jquery.js" type="text/javascript"></script>
<script src="http://www.domain.com/js/jquery.cookie.js" type="text/javascript"></script>
<script src="http://www.domain.com/js/jquery.treeview.js" type="text/javascript"></script>
Can you post the URL where you are having the problem? It sounds like an issue with your relative
paths.
Here is what you can do:
Open up the site in Chrome
View page source
Up in the header, right click on the link to your CSS file and select Open Link in New Window
My guess is that you will get a Not Found error. Look at the URL to the non-existent CSS file
and see if it matches up to where you think it is.
Best,
Cynthia
The recommended way to insert URLs of contents in your MVC web application is by using Url helper.
E.g.
Css:
<link type="text/css" href="#Url.Content("~/Content/jquery.treeview.css")" rel="Stylesheet" />
Scripts:
<script src="#Url.Content("~/js/jquery.js")" type="text/javascript"></script>