How to edit design theme? magento 2

Question

I have create a new design theme by myself at app\design\frontend Its work at the first time, but I can't update the css using setup upgrade or clean cache after I edit the css. Are there any way to edit the css in design theme and update it?

Answer 1

Once you have made changes to the theme's css (if that theme is using the built in LESS system, you don't say if you are inheriting from the blank or luma), you need to do 2 things to get your styles to show up.

first you need to delete the compiled file in the pub folder with this command in the root of your magento install:

rm -rf pub/static/frontend/{namespace}/{theme}/en_US/css

You then have to delete the files inside the view_preprocessed folder with this command in the root of your magento install:

rm -rf var/view_preprocessed/

From there you can clear the cache and then refresh the page and your styles should show. This is predicated that you have set up your LESS files correctly. The right file path should be:

app/design/frontend/{namespace}/{theme}/web/css/source/_extend.less

Answer 2

Just delete the per-generated static files by command in Magento Root Installation

rm -rf pub/static/*

rm -rf var/view_preprocessed/*

Then re-generate the static files using

php bin/magento setup:static-content:deploy en_LOCALE*

en_LOCALE* - Use this if you have a different locale like GB, AU, CA etc.

Answer 3

You can use Client side less compilation for CSS edit.

STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Client side less compilation