使用Node在SASS编译期间注入变量

css CSS

猴子小哥

2020-03-23

在我正在工作的应用程序中,我必须在客户端上渲染之前动态编译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?


附加信息

  1. 我和我的团队并不完全反对改用手写笔 ; 但是,到目前为止,我们已经取得了重大进展,这将是一个痛苦。

第2756篇《使用Node在SASS编译期间注入变量》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
猿Tony 2020.03.23

我正在解决类似的问题,尽管不是在Node中,而是在Java中。根据访问网站的客户端,我需要从数据库中渲染SASS变量以生成网站主题。

我探索了一些解决方案,并遇到了这个第三方服务https://www.grooveui.com它提供了与语言无关的解决方案来解决此问题。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android