6

I am working with Magento2 and have a question. I am working in the development mode.

But when I do some CSS changes in my theme, why I have to manually clear the pub/static/frontend folder every time (when I am in the developer mode). This is very very slow.

How can I work faster?

3 Answers 3

8

Developer Mode - Static Files - Basics

If Magento can’t find a static asset file, it will automatically copy or symlink that file from that file’s source module.


Generate Case

If you change the content of test.css, when you load page, Magento look into the pub/static folder if test.css file not found, it creates from your module or theme.

Not Generated Case

If you change the content of test.css, when you load page, Magento look into the pub/static folder if the test.css file already exist, it skips the generation step so here you need to generate static content manually or remove that particular file from pub static.


Your question solved by two ways

  1. In developer mode you don't need to generate static content every time for single css change. Instead you can just delete that particular file from pub/static folder and then clear cache of magento and browser then load page it will get reflect.

You can use shell script for avoid long typo

    rm -rf var/*
    rm -rf pub/static/frontend/Vendor/theme/en_US/css/test*
  1. You can use grunt for instant changes

Please refer this link for more details

3

You don't need to clear those directories when you make a change, only when you add a new file.

If you really want to speed up your development then your best option is to use a task runner such as Gulp or Grunt. These will compile and even refresh the page for you greatly speeding up your development.

3

Install & use Grunt commands.

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

grunt clean:<theme>
grunt exec:<theme>
grunt less:<theme>
grunt watch

If it happens that you have PHPStorm you can configure it to run watchers. Magento 2 - How to configure Grunt in PhpStorm

It's like when you modify a less file in a theme, the watcher will run grunt less:mytheme

Every time you rename or delete a file in the template of type css, less or js, you need to run grunt clean:<theme>, grunt exec:<theme> and grunt:less<theme> (less command for CSS regeneration).

Chrome knows to read less files instead CSS files.

When you setup it for the first time, make sure you have the filesystem permissions set properly in your Magento 2 dev install.

Running grunt less:mytheme takes more than 3-5 seconds up to 10 seconds or even more, depending on your theme inheritance, files and so on. Best to have your Magento 2 dev on a SSD.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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