How to edit CSS in Luma theme in Magento 2.1?

Question

I am trying to change css of Magento 2.1 Luma theme but its not working.

What will be the better way to modify css in Magento 2.1 Luma theme ?

Answer 1

First go through previous answer steps and go to and edit module wise css given path below

project/vendor/magento/theme-frontend-luma/module_name/web/css/source

and edit common style given path below

project/vendor/magento/theme-frontend-luma/web/css/source

Answer 2

Login in admin => Stores => Configuration => Advance => Developer

In Front-end development workflow section Select Workflow type => Client Side Less Compilation and save config after that clean cache and then edit and check your changes.

You can also use grunt for less compilation check below links.

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

Answer 3

First you have to configure compilation of style in admin path given below

Store -> Configuration -> Advanced -> Developer -> Front-end development workflow

change to

Client side less compilation

- Clear cache

Then edit your theme styles module wise and other web/css/source (common style)