Temas - Uso de bibliotecas externas

Question

Atualmente estamos trabalhando em um novo tema Magento 2 baseado no pai Snowdog Blank Sass.Depois de muita pesquisa, descobrimos vários recursos e insights interessantes sobre como construir um pacote de tema sólido e extensível.O que não temos tanta certeza é como fazer uso de frameworks e bibliotecas externas como, por exemplo, Bootstrap3 ou Font Awesome.

Encontramos várias ideias legais baseadas no Bower, que podem carregar pacotes de todos os lugares e incluí-los dentro do tema.A questão é: onde os colocamos e como tudo vai funcionar com a compilação Sass.Apontamos o parâmetro do diretório Bower para a pasta //lib e colocamos um git ignore na raiz do tema.Com base nessa ideia, podemos, por exemplo, @importá-los para nosso arquivo _styles.scss e fazer uso de todos os mixins e variáveis ​​fornecidos.

No final das contas, não tenho certeza se é assim que o Magento deseja.Quero dizer, a biblioteca jQuery é colocada dentro da pasta /lib/web que poderia funcionar como uma pasta de fornecedor para o Bower.Então, ao mesmo tempo que expliquei neste tópico, também testamos na prática e colocamos o Bootstrap-sass na pasta lib/web.Infelizmente, isso não funcionará porque a implantação estática ficará presa no processo, principalmente porque simplesmente não sabe como lidar com arquivos .scss.

Espero que alguns de vocês possam nos ajudar a encontrar a maneira/posição correta de onde colocar todas essas bibliotecas e frameworks.Bower pode ajudar muito se seguirmos o caminho certo.

Answer 1

Contanto que o compilador Sass (seja Magento/Gulp/Grunt) possa ver a estrutura, isso não importa muito.

Uma coisa a notar é que ao usar o compilador Magento (Sass ou Less), não acho que você possa importar de /lib com @import "../../../../lib".É intencionalmente restrito devido a questões de segurança.

Eu adicionei Bootstrap a dois temas até agora, um usando um tema Magento (Luma) e outro usando o tema em branco do Snowdog (e Frontools para compilar).Foi assim que eu fiz.

Tema Sass em branco

Ao usar o tema em branco do Snowdog, adiciono minhas estruturas/bibliotecas de terceiros em /app/design/frontend/VENDOR/THEME/styles/vendor.Então eles podem ser importados da mesma forma que um projeto não-Magento.

Temas padrão do Magento

Ao trabalhar com a compilação padrão do Magento (sem usar Gulp/Grunt), eu adiciono estruturas/bibliotecas de terceiros ao /app/design/frontend/VENDOR/THEME/web/css/vendor/.Ele pode então ser importado normalmente.

@import 'vendor/bootstrap/_bootstrap.less';

Eu não usei o Bower com Magento 2, mas não consigo ver que seja diferente, apenas certifique-se de que o Bower instale as bibliotecas/frameworks em estilos/vendor para que você possa importá-los facilmente.