Question

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 1

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.