14

I want to modify css file pub/static/frontend/Magento/luma/en_US/css/styles-l.css.
Initially this file is not present in pub/static folder and it's present in

vendor/magento/theme-frontend-blank/web/css/styles-l.less (it's styles-l.less)

When I deply static contents using php bin/magento setup:static-content:deploy , 2 files are created in pub/static related to it.
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

I'm a backed developer and while developing modules I tend to delete whatever is present in pub/static (except .htaccess). So to me it doesn't seem to be the best option to directly modify pub/static/frontend/Magento/luma/en_US/css/styles-l.css.

In that case what's the best practice to modify above css file?
1. Shall I modify pub/static/frontend/Magento/luma/en_US/css/styles-l.less or
2. My understanding is wrong that I can delete everything from pub/static (during development) and I should modify pub/static/frontend/Magento/luma/en_US/css/styles-l.css and never delete it.

17

You should not edit/modify files within pub/* or vendor/* directory. Pub is for deployment and vendor is for default structure, which you override via your template or custom modules. Instead:

  • create a new theme inside app/design/frontend/{vendor}/{yourTheme}/. You can use Blank or Luma theme. You can also create new theme which inherites from Blank (inheritance is defined within theme.xml). If you are already using some theme then skip this step.
  • edit .less within your theme so the changes stay visible and don't get replaced when clearing the cache or upgrading the system.
  • Use grunt to compile your .less into deployment files.
  • You can also setup sourcemaps to pin point your styling within the theme .less files so you can be more productive.

Some useful references:

  • Thank you. I'm using theme Templatemonster/theme and styles-l.less is not present in the theme. Should I copy vendor/magento/theme-frontend-blank/web/css/styles-l.less to app/design/frontend/Templatemonster/theme/web/css/styles-l.less to use/modify it ? – amitshree Jan 8 '16 at 16:08
  • 2
    No, you should edit less files within Templatemonster/theme - styles-*.less files within pub directory are already compiled files from your theme and other resources and not ment to be modified/altered. When you finish editing your files within your TM theme run grunt to compile them into final resources, which will be deployed in the pub folder. You can also use sourcemaps to pin point the less files from your theme. – g5wx Jan 8 '16 at 16:14
  • Thanks again. Just to clarify it, if I have to modify property of classes present in styles-l.less of magento/theme-frontend-blank theme I should use/overwrite those classes in any of (or new) css files in my TM theme and modify accordingly. Does magento/theme-frontend-blank theme behave the same way as base/default theme was working in Magento1? – amitshree Jan 8 '16 at 16:29
  • 1
    Yes, any changes you wish to create they should be reflected within your template so the scope of modification stays local within that template and doesn't get overriden upon upgrades. Blank template in M2 has the same basic function like Default in M1 - that is to have a base definitions already created and your extended theme can have a fallback for elements which you don't modify. – g5wx Jan 8 '16 at 16:36
3

If other theme you should config:

module.exports = {
    blank: {
        area: 'frontend',
        name: 'Magento/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    luma: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    porto: {
        area: 'frontend',
        name: 'Smartwave/porto',
        locale: 'zh_Hans_CN',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    backend: {
        area: 'adminhtml',
        name: 'Magento/backend',
        locale: 'en_US',
        files: [
            'css/styles-old',
            'css/styles'
        ],
        dsl: 'less'
    }
};
  • 1
    In the dev/tools/grunt/configs/theme.js file – Patrick-Peng May 25 '16 at 8:41
3

This is the flowchart that how magento2 process css files.

enter image description here

Source: Inchoo

3

This approach has worked for me

Make the necessary changes in the .less file and then run the following commands:

php bin/magento setup:upgrade

php bin/magento cache:flush
0

I would suggest executing

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

As you would know,

php bin/magento setup:upgrade

will clean the cache and static content, and

php bin/magento setup:static-content:deploy 

will deploy all the themes in <mageroot>/pub folder. This command will significantly reduce the first time load of your store.

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.