Theme development workflow
Continue From: Install Magento:
Enable development mode
In the Magento root directory, run:
1
bin/magento deploy:mode:set developer
See:
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
- In the Admin Panel, go to CONTENT > Design > Configuration
- Find the record corresponding to your store view and click Edit.
- In the Applied Theme drop-down, select your newly created theme.
- Click Save Configuration.
For details, see Apply and configure a storefront theme
Choose .less compilation mode
Grunt (recommended)
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:
Debug
See:
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 thepub/static
andvar/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.