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
|
You can use JS API and define these vars using define
method. See http://learnboost.github.io/stylus/docs/js.html#definename-node