在我正在工作的应用程序中,我必须在客户端上渲染之前动态编译SASS(缓存系统来了,不用担心)。目前,我正在使用node-sass,并且一切正常。
到目前为止,这是我正在研究的内容。为了简洁起见,其他特定于项目的代码也已删除:
var sass = require('node-sass'),
autoprefixer = require('autoprefixer-core'),
vars = require('postcss-simple-vars'),
postcss = require('postcss'),
function compileCSS() {
var result = sass.renderSync({
file: 'path/to/style.scss'
});
return postcss([autoprefixer]).process(result.css.toString()).css;
}
麻烦的是,现在我需要从Node传递动态数据,并像普通的SASS变量一样进行编译。最初,我尝试使用PostCSS,因为我注意到变量注入是可以做到的。不幸的是,那没有用。PostCSS会在编译阶段之后启动,但到现在却失败了。
接下来,我尝试使用下划线模板尝试使用node-sass'覆盖importer()
:
var result = sass.renderSync({
file: 'path/to/style.scss',
importer: function(url, prev, done) {
var content = fs.readFileSync(partial_path),
partial = _.template(content.toString());
return {
contents: partial({ test: 'test' })
};
}
});
导致以下错误:
Error: error reading values after :
显然,SASS不喜欢下划线的可变语法。
TL; DR
如何在Node应用程序中将动态变量传递给SASS?
附加信息
- 我和我的团队并不完全反对改用手写笔 ; 但是,到目前为止,我们已经取得了重大进展,这将是一个痛苦。
我正在解决类似的问题,尽管不是在Node中,而是在Java中。根据访问网站的客户端,我需要从数据库中渲染SASS变量以生成网站主题。
我探索了一些解决方案,并遇到了这个第三方服务https://www.grooveui.com。它提供了与语言无关的解决方案来解决此问题。