我有一个core.style,我把我的网格样式、一些手写笔函数和一些变量放在那里。该文件应在我的所有路由中导入。
除此之外,我还有一个page.styl,它取决于我当前的路线(例如contact.stylfor/contact)
注意:我的项目是基于angular.js的,所以html头不会重新加载。但我可以在html头中添加一些有角度的东西,比如<link href="contact.css">
。
我试着跟随
//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
问题:在contact.styl中,我无法访问我的手写笔变量和函数(在core.styl声明)
一个解决方案是:在每个页面样式表中使用@import '../core.styl'
。但对我来说,这是不可能的。
还有其他解决方案我可以试试吗?
也许是类似的东西(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
}));
(尝试了很长时间,但仍然不适用于我)
编辑:我的文件结构:
|client
||css
|||pages
||||-contact.styl
||||-contact.css
|||base
||||-core.styl
||||-core.css
|server
||-server.js
|
您可以使用JS API并使用define
方法定义这些变量。看见http://learnboost.github.io/stylus/docs/js.html#definename-节点