For the past 3 days, I was looking for a way to make changes to the classic’s theme CSS. As an amateur, I thought that if I make the changes I want to the files that are located on the _dev directory inside my theme, changes will be converted to CSS……. WRONG !!!
So I started looking harder. There are many solutions on the internet. Some almost worked, some not, some were to complicated to understand. After spending hours and hours o this, I final made it. So here it goes.
Classic theme CSS is based on a module bundler called webpack.js. At this time I am trying to understand how it works…
First we need to install node.js. You can download it from here. Use version 6.11.0 ( when I started this tutorial was the latest LTS version)
Go to Prestashop Github and clone branch 1.7.1.x. We need some files contained in _dev directory that are not included on the normal download.
After you have decompress the archive, open Node.js command prompt (a dedicated cmd is installed with node.js called “Node.js command prompt”) and move to themes\classic\_dev and run the following command :
This will install all the dependencies needed. After that, make your changes on the scss files and when you are done, run :
npm run build
The new files generated, can be found on themes\classic\assets.
If you receive messages of Bourbon deprecated stuff, it means that a newest version of burbon is installed via the npm. With the following command you will install an older to overcome this problem :
npm install email@example.com
Also some info on Linux can be found here.