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
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
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>
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>
I have already an exsisting html file which use another librairies and stuff, I want to use in my new ionic application.
So I would like to use it as an ion-view. so I would like to know if it would be possible to include an html file in the ion-view ? which look like :
<ion-view>
<io-content>
</ion-view>
</ion-content>
this is the existing HMTL file where I use different libraries and css file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./assets/js/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/ofc.css" rel="stylesheet" type="text/css" />
<script src="./assets/js/jquery-1.7.1.min.js"></script>
<script src="./assets/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="pouchdb-3.4.0.min.js"> </script>
<script type="text/javascript" src="blob-util.min.js"> </script>
<script type="text/javascript" src="moment.js"> </script>
<script src="properties.js"> </script>
</head>
<body>
<div data-role="page" id="p1">
</div>
<script src="core.js"></script>
</body>
</html>
Why would you do this? I believe this question comes from a problem you haven't described yet.
Normally all libraries used in an Ionic app are included in the index.html and not within each <ion-view> or <ion-content>. In these Ionic directives you only load the HTML needed for that view.
I suggest you start reading from the beginning:
Getting Started with Ionic
Ionic documentation
CodePen examples Ionic
I'm a very new programmer with no experience with tabletools or swf paths whatsoever. I'm trying to implement Table Tools to print/export/etc but so far only print is working for me. Most solutions have said that means the swf path is incorrect. But I have no idea what to put as my swf path. Could anybody please help? Sorry for such a basic question. :(
Here are my plugins and script for dataTables:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="https://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css" />
<script>
$(document).ready(function () {
$('#table_id').DataTable({
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
});
});
</script>
You can browse tabletools files available for cdn here: datatable tabletools plugin files
by visiting the link you will find version list, click one for example 2.2.2
so scroll down to the bottom and see magic:
swf
//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls.swf
//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf