How to include multiple CSS and JS files using Typoscript

You may include multiple CSS files using the following code:

page.includeCSS {

file1 = fileadmin/templates/project1/css/file1.css
file2 = fileadmin/templates/project1/css/file2.css
file3 = fileadmin/templates/project1/css/file3.css

}

Use this code to include Javascript files:

page.includeJS {

file1 = fileadmin/templates/project1/js/file1.js
file2 = fileadmin/templates/project1/js/file2.js
file3 = fileadmin/templates/project1/js/file3.js

}

Consider you wish to have a CSS specifically for IE 6 and below:

[version= < 7][browser = msie]
page.includeCSS.file4 = fileadmin/templates/prj1/css/ie6fix.css
[global]

6 thoughts on “How to include multiple CSS and JS files using Typoscript”

  1. I include jQuery in my base template and I want to include a jQuery plugin from ext_typoscript_setup.txt in my extension.
    In this case, the plugin is included before the main library.
    Can this order be changed?

    Thanks

    1. Yes this is possible.
      If you using includeCSS then the file name is usually used to sort the order!
      At present this sorting seems tricky when using includeCSS, however you may try to use the headerData method to get better control.

  2. Can anyone help me in including a php file. in this file i have a script which is to be run.. so taht whenver a page is loaded from typoscript i want dis php script to run automatically.

  4. useless help to you really as any reader will see this but still:
    file2 = fileadmin/templates/project1/js/file1.js
    should ofcourse be file1 =
    as you would otherwise overwrite this property.

Comments are closed.