Question

如何编译SASS文件并让它输出json文件中每个变量的所有最终值之前我问了一个类似的问题，这里有人认为我试图让你们做我的工作。在我走上最终浪费时间的道路之前，我只是想看看它是否可能。如果可能的话，我不知道开始的神奇酱油。

我有基于bootstrap-sass和其他sass框架的CMS主题，我希望我的CMS能够访问我们在SASS文件中使用的变量。在我看来，如果我编译SAAS文件时，我得到了一个CSS，MAP和JSON文件，我就完全了。

我可以把它写成某种混音，但即使这样，我也需要能够得到

所有变量的列表
将json输出到dist文件夹的命令。

对这些项目的任何指示表示赞赏。

Answer 1

如果你正在使用Gulp来编译你的SASS，那么有一个插件可以实现这一点。

https://www.npmjs.com/package/gulp-sass-json

安装后，并给出以下 Gulpfile.js:

var sassJson = require('gulp-sass-json');

var paths = {
    'json_root' : './bundles/theme/scss/variables/*.scss', 
    'json_dest' : './json'
};

var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'expanded'
};

gulp.task('sass-json', function () {
    return gulp
        .src(paths.json_root)
        .pipe(sassJson())
        .pipe(gulp.dest(paths.json_dest));
});

gulp.task('default', ['sass-json']);

鉴于SCSS文件 variables/colors.scss：

$red: #ed1414;
$blue: #0351e0;
$green: #259208;

在 ./json/colors.json

输出以下json

{
    "red": "#ed1414",
    "blue": "#0351e0",
    "green": "#259208"
}

因此，为了在每次编译时重新输出它，您只需创建一个包含此任务的任务以及正常的样式编译任务。

是否可以编写（通过sass命令或编译器指令）代码，以便SASS将所有变量的最终值输出到JSON文件？

1 个答案: