Todos que utilizam o Bower sabem a facilidade que ele traz para controle de versões em projetos que utilizam diversas ferramentas que facilitam ou complementam o desenvolvimento de aplicações front-end.

Dito isso, recentemente me deparei com um problema ao utilizar o Bower junto com o Jekyll e com o compass. O projeto em questão era um styleguide que utilizava a seguinte configuração no bower.json:

{
  "name": "nome-do-projeto",
  "dependencies":
  {
    "bootstrap-sass": "~3.3.5",
    "jquery": "~2.2.0",
    "DataTables": "~1.10.10",
    "slick.js": "~1.5.9"
  }
}

O problema era que os arquivos de folha de estilo importados do plugin DataTables estavam todos no formato .css e eu precisava que ele fossem no formato .scss, para poder inseri-los via @include no meu códico .scss e gerar o css compilado.

Em outros projetos já passei pelo mesmo problema, mas resolvi utilizando algum gerenciador de tarefas tal como o Grunt ou o Gulp, renomeando o arquivo .css importado pelo bower para .scss antes de inclui-los via compass.

Porém nesse projeto estava usando apenas o Jekyll, então dei uma pesquisada se tinha alguma forma de renomear o arquivo do bower e não achei nenhuma solução para tal. Mas achei algumas técnicas que combinadas formavam a solução ideal. Eis os passos que fiz para resolver:

1º Adicionar a seguinte opção no .bowerrc:

{
  "scripts":
  {
    "postinstall": "./.bower-postinstall"
  }
}

Explicando: O bower permite criar várias configurações dentro do projeto através de um arquivo que precisa ser nomeado .bowerrc e que precisa estar no formato JSON. Saiba mais em: http://bower.io/docs/config/#bowerrc-specification

Uma das opções permite você rodar scripts em bash após o bower instalar as dependências, que é exatamente o que estamos fazendo. No exemplo citado, ele vai rodar o arquivo .bower-postinstall que deve estar na raiz da página do projeto “./.bower-postinstall”

2º Criar o arquivo .bower-postinstall

O nome do arquivo pode ser qualquer um, desde que seja igual ao que foi colocado na opção do .bowerrc. Na primeira linha só colocar #!/bin/sh indicando que o arquivo vai ser rodado em bash. E por fim, a linha

#!/bin/sh

find ./bower_components -name "*.css" -exec bash -c 'mv "$1" "$(sed "s/\.css$/.scss/" <<< "$1")"' - '{}' \;

Esse comando irá procurar por arquivos no formato .css dentro da pasta bower_components e renomea-los para o formato *.scss. Resolvendo assim o nosso problema.

Caso o seu bower esteja configurado pelo .bowerrc para instalar os componentes em outra pasta, substitua o “./bower_components” pelo caminho da pasta correta.

Agora é só rodar o bower install e verá que os arquivos já estarão no formato correto. Caso já tenha rodado o bower install antes de criar o script, é preciso remover a pasta da ferramenta importada (no caso o DataTables) e adicionar de novo via bower install.