Magento2: Best practice to modify css files
-
08-12-2020 - |
Question
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.
Solution
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:
OTHER TIPS
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
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'
}
};
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.