Jekyll 将 SASS 变量导出为 Javascript 变量

Question

我有一个使用 Jekyll 和 Jekyll-Assets 构建的项目（UI Kit 就像 Bootstrap），我正在尝试了解是否可以创建Jekyll 插件或 Jekyll-Assets 插件，以便将 _variables.scss 文件中的所有 SASS vars 变成 中的对象 var >Javascript 文件。这个想法是转换：

// _variables.scss
$white: #FFF;
$black: #000;
$red: #FF0;

进入

// _variables.js
(function(){

    window.appVars = {
       white: '#FFF',
       black: '#000',
       red: '#FF0'
    }

})();

值得一提的是，这个转换后的 javascript 文件稍后会通过 Jekyll-Assets 构建过程导入到其他 javascript 文件中：

// app.js
//= include _variables.js
console.log (window.appVars);

Answer 1

您不需要插件来执行此操作。 最简单的方法是将 jekyll 变量传递给 sass 和 js 文件。

Jekyll 变量

这里，我使用 _config.yml 中的配置变量，但您也可以使用 _data 文件中的变量。

# _config.yml
custom_vars:
  text_color: red
  background_color: '#ddd'

Sass 文件

在标准的 jekyll 设置中，有一个引导文件 assets/main.css 可以导入它需要的所有内容。 看来你不能@import sass 文件包含前面的内容和变量，所以，你必须在@import statment 之前在你的boostrap 文件中获取你的变量。

// assets/main.css
{%- for var in site.custom_vars %}
${{ var[0] }}: {{ var [1] }};
{%- endfor %}
@import "whatever";

Js 文件

通过添加前端来指示 jekyll 处理您的文件：

---
---
// assets/script.js
(function(){
    window.appVars = {
        {%- for var in site.custom_vars %}
          {{ var[0] }}: '{{ var [1] }}'
          {%- unless forloop.last %},{% endunless %}
        {%- endfor %}
    }
})();