kamaci kamaci - 6 months ago 19
Javascript Question

Group of CSS and JS files import at HTML?

I have a group of CSS imports as like:

<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>


and some JavaScript code imports as like:

<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>


Is it possible to put all CSS import lines into a file i.e.
cssImports.css
and put all JS import lines into a file i.e.
jsImports.js
. So when I want to import that CSS and JS group files I will write something like:

<link rel="stylesheet" href="/css/cssImports.css"/>
<script src="/js/jsImports.js"></script>


so all the files listed above will be imported?

PS: I don't want to write any code belongs to web server specific.

Answer

You can Import CSS like this:

Create a new CSS cssImports.css and add there lines

@import url('/css/reset.css');
@import url('/css/visualize.css');
@import url('/css/datatables.css');

and relate it in your homepage as:

<link rel="stylesheet" href="/css/cssImports.css"/>

For Javascript import doesn't work. But you can create a single JS file and include the javascript code of each file after one another. But this is not recommended. It is better to have separate <script> tag for each js file.