I've worked with Magento 1 and Magento 2 up to 2.1, but I'm having trouble with making changes to css and seeing any changes on the frontend.
Magento is in developer mode, and when inspecting elements I am seeing the css file is a _module.scss file, which is new to me and the idea of less.
Can someone help me with the process of how I go about editing the .scss files to see changes on the frontend. I'm used to simply making changes and then deploying static content files again but that doesn't seem to affect the frontend files any longer.
I'm not clear if I need to install Gulp or what to do when I have installed Gulp. I don't see any .less files so can I assume this theme requires Gulp to preprocess files?
Is the correct process now to edit the .scss files in /app/design/frontend/<vendor>/<theme>/Magento_Theme/web/css/source ?
On the front end all I'm seeing is
when inspecting elements in the style editor.
Can someone point me in the right direction with what I need to do edit the theme css and see the changes on the front end please?
Hello @driftdigital
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:
- Getting started with Less
- Less debugging in Magento 2
- Create a theme in Magento 2
- Getting started with Grunt
- Magento UI Library
After changes I would reomment to run below commands:
php bin/magento setup:upgrade php bin/magento setup:static-content:deploy php bin/magento cache:flush
This is the flowchart that how magento2 process css files:
Soruce: Inchoo
