GUIDE to Change the Classic Theme PS 1.7 (SASS+WebPack)

[Web Curator]

Dear Guys,

 

Can someone give us a "step guide" to How to change the Classic Theme with SASS.

1) I have installed Scout App to compile scss files

as suggested here: http://doc.prestashop.com/display/PS16/Using+Sass

(19 errors in the first attempt)

- The INPUT DIRECTORY IS:
/htdocs/prestashop1/themes/classic/_dev/css

- The OUTPUT DIRECTORY IS:
/htdocs/prestashop1/themes/classic/assets

But still I'm not able to see the changes
[cache cleared] instead, if I change theme.css works, but is not the best way.

What we have to install/configure more?
- WebPack?
 

I found this post about, but seem strange that nobody has the same problem?

 

 

Thanks and Regars
 

Edited March 15, 2017 by Web Curator (see edit history)

[keizer]

Try this site how to compile.

https://webkul.com/blog/use-webpack-prestashop-1-7-classic-theme/

 

 

Before installing Webpack you have to install node.js .

Now, Using npm package manager you can install Webpack.

Install Webpack in PrestaShop/themes/classic/_dev folder.

After successful installation of Webpack, you need to install some modules of Webpack.

1

2

3

4

5

6

7

$ npm install --save-dev style-loader

 

$ npm install --save-dev css-loader

 

$ npm install --save-dev babel-loader

 

$ npm install --save-dev postcss-loader

 

You have to go (in the node terminal) to your _dev folder. cd users/etc....

When you install all the needed npm (find it in the package.json file) than you schould compile without errors.

 

A little more information: Don't compile the classic theme with scout app because you need webpack to compile so you use the command: npm run build (I use the git terminal to compile)

Good luck.

Edited March 31, 2017 by keizer (see edit history)

[A G]

Hello,

I did everything like in this tutorial but after npm run build or npm run watch in log file I get:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: ENOENT: no such file or directory, open 'C:\xampp\htdocs\mypresta-com\themes\mypresta\_dev\package.json'
4 verbose stack     at Error (native)
5 verbose cwd C:\xampp\htdocs\mypresta-com\themes\mypresta\_dev
6 error Windows_NT 10.0.14393
7 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
8 error node v6.10.2
9 error npm  v3.10.10
10 error path C:\xampp\htdocs\mypresta-com\themes\mypresta\_dev\package.json
11 error code ENOENT
12 error errno -4058
13 error syscall open
14 error enoent ENOENT: no such file or directory, open 'C:\xampp\htdocs\mypresta-com\themes\mypresta\_dev\package.json'
15 error enoent ENOENT: no such file or directory, open 'C:\xampp\htdocs\mypresta-com\themes\mypresta\_dev\package.json'
15 error enoent This is most likely not a problem with npm itself
15 error enoent and is related to npm not being able to find a file.
16 verbose exit [ -4058, true ]

Of course I don't have package.json but in tutorial there is nothing about package.json and also in Classic presta theme there is no package.json file.

 

Any ideas? Thank you

Edited April 14, 2017 by A G (see edit history)

[30ml]

hi, can you guys send package.json and webpack.js for classic theme ? I have scratched my head lot of times on this .

[Klemart3D]

https://github.com/PrestaShop/PrestaShop/tree/develop/themes/classic/_dev

[joseantgv]

Official doc: https://devdocs.prestashop.com/1.7/development/compile-assets/