如何为 Jekyll 添加自动前缀

Question

Jekyll 的新手和 Ruby 的新手我试图将我的 (s)css 文件的 autoprefixer-rails 直接包含到 Jekyll 中。因此，一旦页面由 Jekyll 自动前缀生成，就会运行覆盖我生成的 css 文件。不幸的是，我没有设法正确设置，autoprefixer 似乎甚至没有触及我的文件。

关注我的 Gemfile：

source "https://rubygems.org"

gem 'jekyll'
gem 'jekyll-assets'
gem 'autoprefixer-rails'

以及我的部分 Jekyll 配置文件：

...
gems: ['jekyll-assets', 'autoprefixer-rails']
...

缺少哪些设置才能使其正常工作？感谢您的帮助！

Answer 1

autoprefixer-rails是一个Rails插件，与Jekyll无关，不能在Jekyll中使用。

如果您需要 Jekyll 中的类似功能，您目前别无选择，只能自己开发。您可以从 Rails 插件中获取部分代码，但 Jekyll 插件的工作方式明显不同。

Answer 2

我可以通过在此处安装 octopress autoprefixer 将它与 jekyll 3 一起使用： https://github.com/octopress/autoprefixer.

然后你输入： gems: [octopress-autoprefixer] 在您的配置文件中。我没有使用 octopress，我只是安装它看看它是否可以工作。

在这个过程中我还安装了node.js（在一台电脑上，win 10），所以我可以安装autoprefixer-rails。不确定 octopress 安装程序是否处理了这个问题，我只是随机尝试看看它是否有效。我认为 node.js 是一项要求，因为我记得在我重新启动之前什么都没有发生，然后一切正常。

它工作得很好，虽然它确实减慢了我的构建时间 - 在一个通常在 0.5 秒内构建的小站点上它会增加到 12 秒。

Answer 3

使用 jekyll-assets 和 autoprefixer-rails 将 Autoprefixer 添加到 Jekyll 的文档已更新： https://github.com/jekyll/jekyll-assets#addons

Answer 4

这完全有可能，而且也很容易！

您在网上找到的大多数资源都建议切换到 Jekyll Assets, which comes with a number of default plugins, including autoprefixer-rails. That, however, replaces the entire Jekyll asset pipeline, and requires changes in lots of places. A fairly high investment up front, just to get it working. Plus, the project appears to be dormant。

我继续寻找一个简单问题的简单解决方案，我遇到了 jekyll-autoprefixer, available as a Ruby Gem。将其集成到我的 Jekyll 工作流程中非常简单：

更新 Gemfile 以包含以下内容：
```
gem "jekyll-autoprefixer", "~> 1.0.2"
```
将以下内容添加到_config.yml:
```
plugins:
  - jekyll-autoprefixer
```
可选择将所需的浏览器支持添加到 _config.yml（例如，对于最新的 2 个版本和 Edge 版本 14 及更高版本）：
```
autoprefixer:
  browsers: 
    - last 2 versions
    - Edge >= 14
```
注意：您也可以在根目录中提供 .browserslistrc 文件。
可选择启用 CSS 网格布局前缀。这似乎是不安全的，默认情况下是禁用的。您可以使用 control comment（例如 /* autoprefixer grid: autoplace */）从 CSS 代码启用它，或者通过 _config.yml:[=18 全局启用它=]
```
autoprefixer:
  grid: autoplace
```

这就是将 autoprefixer 集成到 Jekyll 中所需的全部内容。

如何为 Jekyll 添加自动前缀

How to include autoprefixer for Jekyll

css

ruby

jekyll

jekyll-extensions

autoprefixer