Stylus global variables

Issue

I have a core.styl where I put my grid-style, some stylus-functions and some variables. This file should be imported in all of my routes.

Beside that I have an page.styl which depends on my current route (e.g. contact.styl for /contact)

Note: My project is based on angular.js so the html-head doesn't reload. But I'm able to add some stuff with angular in html-head like <link href="contact.css">.

I tried following

//index.html
<link rel="stylesheet" href="/css/core.css" /> <-- this is static, always there
                               
<link rel="stylesheet" href="/css/pages/contact.css" /> <-- added by angular

The Problem: In the contact.styl I have no access to my stylus variables and functions (declared in core.styl)

one solution: @import '../core.styl' in each page stylesheet. But for me out of the question.

Is there an other solution I can try out?

Maybe something like that (server.js)?

function compile(str, path) {
    return stylus(str)
        .import(config.path_client + "/css/core")
        .set('filename', path)
        .set('warn', true)
        .set('compress', true);
}
app.use(stylus.middleware({
    src: config.path_client + '/css/pages',
    compile: compile
}));

(tried very long but still doesn't work for me)

Edit: My file structure:

|client
||css
|||pages
||||-contact.styl
||||-contact.css
|||base
||||-core.styl
||||-core.css
|server
||-server.js
|

Solution

You can use JS API and define these vars using define method. See http://learnboost.github.io/stylus/docs/js.html#definename-node

Answered By - Panya