After installing Magento 2.0 framework many of us face the issue of no formatting on frontend or admin panel.
After installation there is possibility of the less files are not yet compiled and the Workflow type is server side i.e the less files should be compiled on server and your mode of project is 'developer'.
The setting is available in admin panel at Stores > Configuration > Advanced > Developer > Frontend development workflow > Workflow type.
There are two solutions.
> Set the Workflow type to "Client Side Less Compilation" but this will slow down your frontend as the less files will be compiled in browser's Javascript engine.
> The other way is to compile the files manually using the "grunt" (http://gruntjs.com/) tasks available in Magento 2. Below are the steps to follow.
1) Assuming that you have already installed nodejs (https://nodejs.org/) on the machine where the web server and your Magento 2 installation is located.
2) In the node command prompt, navigate to Magento 2 root directory and run following command to install the grunt plugin.
npm install grunt
3) The above will install the grunt npm package and you'd be now able to run grunt tasks in Magento 2 installation path.
4) Once the grunt plugin installed, run following command. You'd need your PHP process running as less compilation is executed by PHP.
grunt refresh
The above command will compile less files in all of the themes available in current installation.
It will take around 3 - 4 minutes depending on the complexity of theme. You can optionally run the following command to compile particular theme only.
grunt exec:<YOUR THEME NAME>
When the process completes successfully, you'll be able to review the frontend and admin panel with CSS formatting working.
After installation there is possibility of the less files are not yet compiled and the Workflow type is server side i.e the less files should be compiled on server and your mode of project is 'developer'.
The setting is available in admin panel at Stores > Configuration > Advanced > Developer > Frontend development workflow > Workflow type.
There are two solutions.
> Set the Workflow type to "Client Side Less Compilation" but this will slow down your frontend as the less files will be compiled in browser's Javascript engine.
> The other way is to compile the files manually using the "grunt" (http://gruntjs.com/) tasks available in Magento 2. Below are the steps to follow.
1) Assuming that you have already installed nodejs (https://nodejs.org/) on the machine where the web server and your Magento 2 installation is located.
2) In the node command prompt, navigate to Magento 2 root directory and run following command to install the grunt plugin.
npm install grunt
3) The above will install the grunt npm package and you'd be now able to run grunt tasks in Magento 2 installation path.
4) Once the grunt plugin installed, run following command. You'd need your PHP process running as less compilation is executed by PHP.
grunt refresh
The above command will compile less files in all of the themes available in current installation.
It will take around 3 - 4 minutes depending on the complexity of theme. You can optionally run the following command to compile particular theme only.
grunt exec:<YOUR THEME NAME>
When the process completes successfully, you'll be able to review the frontend and admin panel with CSS formatting working.
