Theme development workflow

Continue From: Install Magento:

Enable development mode

In the Magento root directory, run:

1
bin/magento deploy:mode:set developer

See:

• About Magento modes
• Get started with command-line configuration

To check the current mode of your Magento instance, in the root directory, run: bin/magento deploy:mode:show.

Create basic theme files

In the <magento_root>/app/design/frontend/<Your_Vendor>/<your_theme> directory, create the following files:

• theme.xml
• registration.php
• (optionally) composer.json

For details, see Create a new storefront theme

Apply the theme

1. In the Admin Panel, go to CONTENT > Design > Configuration
2. Find the record corresponding to your store view and click Edit.
3. In the Applied Theme drop-down, select your newly created theme.
4. Click Save Configuration.

For details, see Apply and configure a storefront theme

Choose .less compilation mode

Grunt (recommended)

• Setup Grunt
• Add the theme to Grunt configuration
• Track changes

Client-side compilation

See CSS preprocessing#client-side compilation mode

Server-side compilation (default)

See CSS preprocessing#server-side compilation mode

Custom preprocessor

See Using custom CSS preprocessor

Create your styles

See:

• Quick start guide to working with styles
• All about styles in Magento themes

Debug

See:

• Locate the CSS/Less file you need to change
• CSS source maps
• Track changes using Grunt

Clean cache and/or static files if necessary

• Certain changes in styles require cleaning previously pre-processed and published static view files. Run grunt clean <theme> or manually clear the pub/static and var/view_preprocessed directories. Do this after any changes in server-side compilation mode. For the client-side or Grunt compilation, see Clean static files for details.

• Changes in layout and templates requires cleaning cache. See Clean cache for details.

Make sure that the same styles are delivered to production (optional)

When you finish developing and your styles are ready to go to production, you can configure your Grunt/Gulp less compiler to minify compiled code, disable source maps generation and then copy the compiled files to /app/design/frontend/<Vendor>/<theme>/web/css directory next to source files. They will be used in static content deploy instead of running backend compilation (and static content deployment process will run faster).

Switch to production mode

In the Magento root directory, run:

1
bin/magento deploy:mode:set production

See Magento modes for details.

Deploy static content

To publish your static files to the pub/static directory when your Magento instance is set to production mode, run the static content deployment tool.