We Keep Coding

How to keep separate css links in Astro at build time

In Astro.js, when i put these lines in a .astro file :
<link rel="stylesheet" href={ Astro.resolve('../styles/preloader.scss') }>
<link rel="stylesheet" href={ Astro.resolve('../styles/application.scss') } media="print" onload="this.onload=null;this.media='all'">
the result I get at build time is this :
(I am building a multi language site. The 'en' in en.ffae6e3d.css is from the english page /en )
<link rel="stylesheet" href="../assets/application.ddd2d855.css">
<link rel="stylesheet" href="../assets/en.ffae6e3d.css">
How can I get this result ?
<link rel="stylesheet" href="../assets/preloader.css">
<link rel="stylesheet" href="../assets/application.css" media="print" onload="this.onload=null;this.media='all'">
This is the (expected) result I get indevelop mode.

You could try is:inline for loading resource files on the client side without compiling it during build.
https://docs.astro.build/en/reference/directives-reference/#isinline

Using a HTML5 Theme in Angular 2

I am wondering how can i set up my current Theme that is designed using bootstrap and some css and js
I am using following css and js files in my theme and i don't want to put it in index.html like we did in angular 1 can any one tell me how to import all css and js effectively without compromising Angular 2 structure and behaviour.
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="theme/css/theme-icons.css" rel="stylesheet" type="text/css">
<link class="main-stylesheet" href="theme/css/theme.css" rel="stylesheet" type="text/css" />
<link href="theme/css/style.css" rel="stylesheet" type="text/css" />
Js files
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/modernizr.custom.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-easy.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-bez/jquery.bez.min.js"></script>
<script src="assets/plugins/jquery-ios-list/jquery.ioslist.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-actual/jquery.actual.min.js"></script>
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-select2/select2.min.js"></script>
<script type="text/javascript" src="assets/plugins/classie/classie.js"></script>
<script src="assets/plugins/switchery/js/switchery.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
I tried using ng2-bootstrap and bootstrap but can not get it working.

Your problem is your loading straight bootstrap along with jquery plugins instead of a something like angular-ui-bootstrap. Some boostrap stuff uses pure CSS(no compatibility issues) and others use jquery/ which can work iffy with Angular1/2 sometimes hence projects like angular-ui-bootstrap.
try the angular 2 version https://ng-bootstrap.github.io/
then load all the css files using webpack(just putting in the same css folder the current project css files are). Obviously you would need to change the existing bootstrap javascript code to angular-ui directives.

Modal error in ui kit

I want to use modal in my page.but when i call it browser console errors modal is not defined
included files to index file:
<link rel="stylesheet" type="text/css" href="./dist/semantic.min.css">
<script src="dist/components/modal.js"></script>
<link rel="stylesheet" type="text/css" href="dist/components/modal.css">
<script src="dist/components/modal.js"></script>
<link rel="stylesheet" type="text/css" href="dist/components/modal.min.css">
<script src="dist/components/modal.min.js"></script>
<script src="./dist/semantic.min.js"></script>
and this is my code for calling modal:
$(document).ready(function(){
alert("Document Was ready");
$('#sign').click(function(){
$('.modal').modal('show');
});
});
This is error:TypeError: $(...).modal is not a function
and this is link of modal in semantic-ui:http://semantic-ui.com/modules/modal.html
I use first modal ^_^

You have to move:
<script src="dist/components/modal.min.js"></script>
after:
<script src="./dist/semantic.min.js"></script>
because now you are trying to execute $().modal before Semantic have been loaded. Also, you are loading it twice and also a minified version; I assume you need only the minified version.
Your code should look like that:
<link rel="stylesheet" type="text/css" href="./dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="dist/components/modal.css">
<link rel="stylesheet" type="text/css" href="dist/components/modal.min.css">
<script src="./dist/semantic.min.js"></script>
<script src="dist/components/modal.min.js"></script>
And it's good practice to load CSS files before scripts.

Bootstrap modal showing or not depending on bootstrap version

I'm relatively new to web programming so I used a couple of templates to create my website, all of them related to Twitter Bootstrap.
My login page correctly shows Bootstrap modals. These are the imports I used there:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
The problems start with the main page after login. It was taken from another template and it uses the following imports:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
As you can see the only change is the source of Bootstrap. In the first case I downloaded it to the css folder, while in the second case it's taken directly from the server.
As a result the modals do not show in the main page (the second one). The screen fades to black but no modal is shown.
If I modify the imports of the main page to take Bootstrap from the css folder instead of the server, the modals do show, but the layout of the whole page is ruined:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
Instead of this:
Any ideas?

Have you add meta tag for responsive in head tag of the page. If not then try to add following meta tag into your head tags of the page.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this will be resolve your problem.
Note : First try this to add into your version in which you imports bootstrap downloaded files.

Ok after some research I solved my problem, I hope others will benefit from it.
This post actually solved it: here
Apparently the syntax for the modal in Bootstrap 3 is different and among other things it has to include these lines:
<div class="modal-dialog">
<div class="modal-content">
So I took the example under the link, tweaked it for my purposes and it worked. Problem solved.

safari, minified js, Kendo UI script loading - getting 404s for sources

when my page loads, I'm getting tons of 404 errors for js sources I'm not even using. But they appear to be referenced from kendo.web.min.js and other kendo js scripts
All of my scripts are in:
/data/js/jquery_lib/
I'm loading up kendo.web.min.js
<link href="/data/css/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="/data/css/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="/data/css/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/data/js/jquery_lib/jquery.min.js"></script> (version 1.9.1)
<script type="text/javascript" src="/data/js/jquery_lib/kendo.web.min.js"></script>
and this is what happens: