Include CSS file in JS

Question

I have a problem with url in js file First, in Snippets i have code

In that init.js i have that

(function($) {

skel.init({
    reset: 'full',
    breakpoints: {
        global:     { range: '*', href: '{stylesheet=global_embeds/style}', containers: 1400, grid: { gutters: 50 } },
        wide:       { range: '-1680', href: '{stylesheet=global_embeds/style-wide}', containers: 1200, grid: { gutters: 40 } },
        normal:     { range: '-1280', href: '{stylesheet=global_embeds/style-normal}', containers: 960, grid: { gutters: 30 }, viewport: { scalable: false } },
        narrow:     { range: '-980', href: '{stylesheet=global_embeds/style-narrow}', containers: '95%', grid: { gutters: 20 } },
        narrower:   { range: '-840', href: '{stylesheet=global_embeds/style-narrower}', grid: { collapse: 1 } },
        mobile:     { range: '-736', href: '{stylesheet=global_embeds/style-mobile}', containers: '90%', grid: { gutters: 15 } },
        mobilep:    { range: '-480', href: '{stylesheet=global_embeds/style-mobilep}', grid: { collapse: 2 }, containers: '100%' }
    },

In template group global_embeds i have all this files

BUT link {stylesheet=global_embeds/style-mobile} doesn't work on js file

What to do? Who know? =(

Answer 1

First of all, the stylesheet tag needs quotation marks.

{stylesheet="global_embeds/style"}

If you link to the JS file using path variable, all the templates variables on the linked file will be parsed.

{path="global_embeds/init.js"}

But I really don't think it's good for performance. It's much better to use static links for the JS and CSS.