I normally change the file /dev/tools/grunt/configs/themes.js
but in the .gitignore we can see a configuration file called /dev/tools/grunt/configs/local-themes.js
I'd like to use that file instand a core file.
I try to find something related in the DevDocs, but there's nothing about this new file.
How can I configure my theme using the file /dev/tools/grunt/configs/local-themes.js
?
I don't want to create a new Grunt file or to change the core, like this questions below!
Best Answer
Set up Grunt Environment
When the installation is finished, the next step is to setup the Grunt environment. All described steps are covered in the official Magento 2 documentation, although there it’s not as compactly summarised as it is here.
First of all, we need node.js for our stack.
Then we can install the Grunt CLI
followed by the initialization of the project specific dependencies
To test if everything is correctly installed, use the following call:
Create Theme Files and use them in Magento 2
In Magento 2, themes are stored in the file system in the following pattern:
app/design/frontend///
For a minimal setup, we create a theme which inherits everything from Luma. So we create the following files:
Two trivia we want to change right now, so that we can see right away that we no longer use the original Luma theme:
Then we select the theme in Magento 2’s backend:
Stores > Configuration > Design > Design Theme
Start the Frontend Workflow with Grunt
Before we can really get to work, we need to tell Grunt that we have just created a new theme. And here is the file entry that does the trick:
Afterward, the following steps should be executed exactly once before starting to work:
Clean static files and caches:
Collect resources and generate static files for our theme:
Initialize the preprocessing:
Afterward, reload the frontend page! The first-page view might lead to excessively long load times since Magento 2 starts the preprocessing in the background which means that a great number of files need to be processed.
Voilà! We have successfully changed Magento’s background color and font color in the menu using our own workflow. From now on, we can start the watch task:
If we change a LESS file, Grunt will automatically update all necessary files so we only have to reload the frontend (with the LiveReload browser plugin installed, you won’t even need to do that manually).
Trouble Shooting
Changing Files
In some cases (e.g. adding new files) it might be necessary to initialize everything again:
General “unidentified” problems
The following checklist should reset the system and make changes visible: