Shopify ThemeKit - Webpack

1. Requirements
2. Getting Started
3. Theme files
4. Commands

Features

• Webpack 4
• Stylelint
• ESLint
• Babel
• Middleware for Shopify preview
• BrowserSync

Requirements

• Have theme kit installed globally (run auto install once per computer)

• Create config.yml

Getting Started

1. Install dependencies - npm install

2. Start webpack compiler - npm run watch

3. Watch files and upload to Shopify - npm run theme:watch

Deploying

1. Build css/js using production settings npm run build

2. Deploy theme - npm run theme:deploy

Theme files

If this is a new project you will need to add the compiled files to theme.liquid

 {{ 'compiled.css' | asset_url | stylesheet_tag }}
 {{ 'compiled.js' | asset_url | script_tag }}

Commands

Build - Builds js/scss in production mode

npm run build

Test - Runs all tests and code linters

npm run test

Lint CSS - Checks scss for errors and best practices.

npm run lint:css

Lint JS - Checks js for errors and best practices.

npm run lint:js

Fix CSS - Checks scss for errors and best practices. Automatically fixes simple errors like line endings

npm run fix:css

Fix jS - Checks js for errors and best practices. Automatically fixes simple errors.

npm run fix:js

Linting

This project uses stylelint and eslint for checking css and js.

• StyleLint

• Prettier

• ESLint