0

I'm new to Magento. I have recently purchased a Magento theme from Themeforest, I found that there are no .css files there, instead there are only .less files, so I edited them but nothing happens in the website, nothing at all!
Is there any specific command I have to run?
And what is the right way to edit theme's stylesheet in Magento?
- Magento v2.2.3
- Mode: Default Mode.

0

yes there are few commands to run in order to reflect the changes :

in comamnd line on your magento root run below command :

rm -rf ./pub/static/frontend ./pub/static/adminhtml ./var/view_processed/pub

php bin/magento setup:static-content:deploy -f
7
  • It says : NOTE: Manual static content deployment is not required in "default" and "developer" modes. In "default" and "developer" modes static contents are being deployed automatically on demand. If you still want to deploy in these modes, use -f option: 'bin/magento setup:static-content:deploy -f'
    – Hamed Adil
    Mar 15 '18 at 16:53
  • Should I run it with (force mode?)
    – Hamed Adil
    Mar 15 '18 at 16:55
  • yes, i have updated command Mar 15 '18 at 16:56
  • The deployment ran successfully but nothing happened.. Changes did not reflect.
    – Hamed Adil
    Mar 15 '18 at 17:09
  • in which file are you making changes ? this command will compile your less file code Mar 15 '18 at 17:15
0

To reflect the changes of css files you have to do following steps. Install node.js to any location on your machine.

Install Grunt CLI tool globally. To do this, run the following command in a command prompt:

npm install -g grunt-cli

Install (or refresh) the node.jsproject dependency, including Grunt, for your Magento instance. To do this, run the following commands in a command prompt:

cd npm install npm update

Add your theme to Grunt configuration. To do this, in the dev/tools/grunt/configs/themes.js file, add your theme to module.exports like following:

module.exports = { ... <theme>: { area: 'frontend', name: '<Vendor>/<theme>', locale: '<language>', files: [ '<path_to_file1>', //path to root source file '<path_to_file2>' ], dsl: 'less' ... }, 

Where the following notation is used:

<theme>: your theme code, conventionally should correspond to the theme directory name.

<language>: specified in the 'code_subtag' format, for example en_US. Only one locale can be specified here. To debug the theme with another locale, create one more theme declaration, having specified another value for language

<path_to_file>: path to the root source file, relative to the app/design/frontend/<Vendor>/<theme/>web directory. You need to specify all root source files of the theme. If your theme inheritsfrom a certain theme, and does not contain its own root source files, specify the root source files of the parent theme.

(Optional) If you want to use Grunt for "watching" changes automatically, without reloading pages in a browser each time, install the LiveReload extension in your browser

There are grunt commands which will useful.

grunt exec: grunt less: PHP bin/magento s:s:d - f

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.