When I use import in my JavaScript file in node.js it lose the connection with my html file,
and I tried in my html file but it didn't work
i tried
<script type="text/JavaScript" src="JavaScript"></script>
<link rel="stylesheet" href="javascript">
and its work but when I used import in the JavaScript file it didn't
Your script and link are invalid.
the script connect the HTML to the javascript file so the src is the relative path to that particular javascript file.
<script type="module" src="file.js"></script>
stylesheet is CSS so the href is the path of the CSS file
<link rel="stylesheet" href="file.css">
Related
I am trying to migrate a MVC project into Angular 6.
I have css files and js files in chtml code which are used in the mvc application as below :
<link rel="stylesheet" href="~/OptumFiles/fonts-clientlibs-global.min.css" type="text/css">
<link rel="stylesheet" href="~/OptumFiles/optum-clientlibs-global.min.css" type="text/css">
<script async="" src="~/OptumFiles/analytics.js"></script>
<script async="" src="~/OptumFiles/js.js"></script>
Now i want to use these files in my angular project globally.
Things i have tried :
Created a folder FICAssets in the Angular project.
Added files in that folder.
Added their reference in index.html file.
Code in index.html :
<body>
<link rel="stylesheet" type="css" href="FICAssets/css/fonts-clientlibs-global.min.css">
<link rel="stylesheet" type="css" href="FICAssets/css/optum-clientlibs-global.min.css">
<script src="FICAssets/js/analytics.js"></script>
<script src="FICAssets/js/js.js"></script>
<app-root></app-root>
</body>
The problem is that iam still not able to load the files , getting 404 error.
Assets aren't magical, they need to be declared as such.
Open your angular.json file. Find the path
projects.YourProjectName.architect.build.options.assets
And from there, add your declared folder in it. It should keep the assets up when the project is complied.
open your angular.json.
add style in "styles": []
add script in "scripts": []
reference link :- https://www.truecodex.com/course/angular-6/how-to-include-external-css-and-js-file-in-angular-6-angular-7
How can I change context root path from http://host:port/app_name to only an app_name in web.xml file or another way in Dynamic Web Project.
Actually, I'm facing an issue to import local javascript, css and other resources into my view say html/jsp.
for example, I have some js and css files inside resources folder of web-content.
Now to import these I'm using below code.
<link rel="stylesheet" href="http://localhost:8080/appname/resources/css/bootstrap.min.css">
<script type="text/javascript" src="http://localhost:8080/appname/resources/js/angular.min.js"></script>
<script type="text/javascript" src="http://localhost:8080/appname/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost:8080/appname/resources/js/bootstrap.min.js"></script>
So now I want to change http://localhost:8080/appname/ to the only appname/ means <script type="text/javascript" src="appname/resources/js/angular.min.js"></script> as host and port dynamic in nature and can be changed anytime. So how can I achieve it.
I recently downloaded a theme namely (scalia)
it has lots of css but they are present in file with .html extension
every page of this theme open good at local computer [not localhost (i am directly opening index.html in browser)] but when upload it to hosting it shows a mime type error.
Stylesheets are linked in this format
<link rel='stylesheet' id='layerslider-group-css' href="indexf67d.html?f=scalia/wp-content/plugins/LayerSlider/static/css/layerslider.css,scalia/wp-content/plugins/contact-form-7/includes/css/styles.css,scalia/wp-content/plugins/scalia-style-changer/css/ssc-style.css,scalia/wp-content/plugins/mailchimp-for-wp/assets/css/checkbox.min.css,scalia/wp-content/themes/scalia/css/woocommerce.css,scalia/wp-content/themes/scalia/css/woocommerce1.css" type='text/css' media='all'/>
I already got these css file layerslider.css, styles.css, ssc-styles.css etc. etc.
My main question is [is there any alternative of the above code? so that i can replace this code and link my css files manually]
Yes.
If you have a .css file in the same directory than your html file, you can include it that way:
<link rel="stylesheet" type="text/css" href="myfile.css">
If it's in another directory, use relative path or complete path like so
Relative: file inside folders that are in the same directory than the html file
<link rel="stylesheet" type="text/css" href="folder/anotherfolder/myfile.css">
Relative: file that is in the root of the directory containing the html file.
<link rel="stylesheet" type="text/css" href="../myfile.css">
Complete
<link rel="stylesheet" type="text/css" href="C:/Users/yourname/Documents/CSS/myfile.css">
Just visit the link in your href. Save the CSS that you get as a seperate CSS file. Replace the href in the above line with the path to new downloaded file.
My folder structure looks like,
MyProject
|
webcontent
Inside webContent folder I am having my html, js,CSS files.
Here I am loading the js & CSS files directly as below.
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
But I want to keep the js and CSS file in different folder and I need to call them where I want. But I am not getting where to place the js & CSS file and how to define the path inside html or jsp.
It depends on where they are and how you configure your web server. With a default configuration on nearly all web servers, if you want your scripts in a subdirectory of webcontent, then just add directory-name/ in front of the paths. E.g., for:
MyProject/
|
webcontent/
|
js/
jquery-1.0.2.js
jquery-ui.js
css/
jquery-ui.css
then
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
The search terms for this are "relative URL" and/or "relative path."
Suppose you have your css file in
WebRoot --> Css
folder then use below line in your html
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
I hope this helps you
for example, Your HTml file is in one folder and your CSS/js file is in a folder name "mystyle" inside HTML folder. You should address your CSS file LIKE this:
<link rel="stylesheet" href="mystyle/style.css" />
And if your file is in a folder "before" HTML folder, your address your css/js file like this:
<link rel="stylesheet" href="../mystyle/style.css" />
If I have multiple script tags in my index.html
<link rel="stylesheet" href="style/style.css" />
<script src="myjs/js.js"></script>
Is it possible to write a gulp task that looks at all html files, and appends "mydir/" to the front of all paths such that the output file (of the same name) i.e. index.html is still index.html.
So when I open the file if I look at the paths, I see
<link rel="stylesheet" href="mydir/style/style.css" />
<script src="mydir/myjs/js.js"></script>
I know there is a gulp-rename, but it looks to only rename files and not contents of files.
Making this the actual answer -
<base href="mydir/">
You don't need gulp to do this for you.