technos

GTX Implement

Boilerplate de projeto Vtex GTX

Tabela de conteúdo

• Primeiros Passos
• Scripts Disponíveis
  • npm start
  • npm run build
• Adicionando Stylesheets
• Pré e Pós-Processamento de CSS
• Adicionando Imagens e SVG

Primeiros Passos

Passo 1:

Para iniciar um novo projeto, clone este repositório e substitua o remoto origin inicial com os comandos:

git remote rename origin upstream
git remote add origin ~URL-DO-REPOSITÓRIO~
git remote remove upstream

Passo 2:

Substitua o name, description, storeName, homepage e repository.url no package.json.

Scripts Disponíveis

No diretório do projeto, você pode executar:

npm start

Roda o modo de desenvolvimento da implementação. Abra http://localhost:3000 para ver no browser.

A página recarregará com novas mudanças. Você verá erros do ESLint no browser e warnings no console.

npm run build

Monta o build da implementação, na pasta build, para produção.

Adicionando Stylesheets

Para adicionar stylesheets ao componente, basta importá-lo com import './stylesheet.scss'. O Webpack se encarregará de injetar o css dinamicamente no modo de desenvolvimento. Ao importarmos o componente na etapa de implementação, sua stylesheet será concatenada automaticamente no bundle da implementação.

Pré e Pós-Processamento de CSS

Atualmente, utilizamos o Sass para pré-processamento do css. No pós-processamento, utilizamos o PostCSS apenas para o autoprefixer das propriedades.

Adicionando Imagens e SVG

A importação de Imagens e SVG acontece da mesma forma das stylesheets. Dentro do arquivo .pug, utilize require('arquivo.png'), por exemplo, e o Webpack se encarregará do resto.

GTX e-Commerce Agency