Complementos Jekyll

← Apuntes Jekyll Añadir bootstrap al proyecto →
Tabla de contenido 📄

Prefijo automático

Si bien Jekyll viene con un compilador Sass incorporado, no proporciona prefijos CSS. Una forma que encontré para resolver ese problema es instalando jekyll-autoprefixer como complemento (plugin).

Para ello vamos agregar la gema jekyll-autoprefixer al Gemfile (por alguna razón otras versiones a mi no me funciona):

Gemfile
1
gem "jekyll-autoprefixer", "1.0.1"

Instalamos la gema:

1
bundle install

Para habilitar el complemento, abrimos el archivo _config.yml y lo añadimos:

_config.yml
1
2
plugins:
  - jekyll-autoprefixer

Ahora veremos que el archivo css que se produce tendrá los prefijos correspondiente. Ej:

main.css
1
2
3
4
5
6
7
8
9
10
11
12
pre {
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
}

.rouge-table .lineno {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

Luego en el mismo archivo _config.yml podemos configurar con la palabra clave autoprefixer. Por ejemplo para decir que queremos que los prefijos admitan las útimas 4 versiones de cada navegador, agregamos lo siguiente:

_config.yml
1
2
3
autoprefixer:
  browsers:
    - last 4 versions
← Apuntes Jekyll Añadir bootstrap al proyecto →