Jump to content

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


Recommended Posts

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 by Web Curator (see edit history)

Share this post


Link to post
Share on other sites
  • 3 weeks later...

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 by keizer (see edit history)

Share this post


Link to post
Share on other sites
  • 2 weeks later...

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 npm@3.10.10
3 info using node@v6.10.2
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 by A G (see edit history)

Share this post


Link to post
Share on other sites
  • 1 month later...

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

Share this post


Link to post
Share on other sites
  • 1 year later...
  • 10 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More