Question

我有一个项目（UI工具包就像Bootstrap），使用 Jekyll 和 Jekyll-Assets 进行构建，我试图了解是否可以创建 Jekyll 插件或 Jekyll-Assets 插件，以便将所有 SASS 变量从_variables.scss文件变为对象变量在 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 %}
    }
})();

Jekyll将SASS变量输出到Javascript变量

1 个答案:

Jekyll变量

Sass文件

Js文件