[1.7.0.2] Bootstrap 4, SASS, bourbon

[Eric Monnier]

Je viens d'installer la nouvelle monture de Prestashop et j'ai remarqué l'intégration de différents éléments (Bootstrap 4, SASS, bourbon). J'ai fait quelques recherches sur leurs fonctionnements, mais surtout sur la possibilité de modifier les fichiers .scss du dossier _dev. Malheureusement, je ne comprends pas comment compiler ces fichiers après modification.

 

Comme je ne sais pas si c'est automatique j'ai essayé d'installer Scout-App, mais celui-ci me génère des erreurs sur l’importation des fichier bourbon.
 
 

File to import not found or unreadable: ~bourbon/app/assets/stylesheets/bourbon
Parent style sheet:
theme.scss
1: @import "~bourbon/app/assets/stylesheets/bourbon";

 

 

Si vous avez la solution a mon problème c'est volontiers.
 

Merci pour votre future aide.

Monnier

[Atch]

Bonjour,

 

Il faut passer par la ligne de commande  webpack -w
 

c:/www/maboutique/themes/montheme/_dev/  webpack -w 

Il faut au préalable avoir installé composer etc... et le fichier package.json dans le rep _dev de votre theme

 

V++

 

Atch

 

[Eric Monnier]

Merci,
Si je comprend bien je dois installer composer.phar à la racine de mon site, ensuite je fais un Update. Jusqu'ici tout va bien.
 

 

php -d memory_limit=-1 composer.phar update

 

par contre quand je veux exécuter la commande webpack
 

 

php -d memory_limit=-1 composer.phar themes/classic/_dev/ webpack -w

 

j’obtiens une erreur.

 

 

 [symfony\Component\Console\Exception\CommandNotFoundException]
  Command "themes/classic/_dev/" is not defined.

Je pense que je fais une erreur ou que je ne comprends pas bien quelque chose.
Désoler, je débute avec symfony et prestashop et ça fait beaucoup de choses a assimiler.

 

Voici mon fichier package.json :
 

 

{
  "name": "prestashop-starter-theme-dev-tools",
  "version": "0.0.1",
  "description": "Tools to help while developing the starter theme",
  "main": "index.js",
  "scripts": {
    "watch": "webpack -w",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^5.3.2",
    "bootstrap": "4.0.0-alpha.4",
    "bootstrap-touchspin": "^3.1.1",
    "bourbon": "^4.2.6",
    "css-loader": "^0.23.1",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^1.0.0",
    "file-loader": "^0.8.5",
    "flexibility": "^1.0.5",
    "jquery": "^2.1.4",
    "material-design-icons": "^2.1.3",
    "node-sass": "^3.4.2",
    "notosans-fontface": "~1.0.1",
    "postcss-flexibility": "^1.0.2",
    "postcss-loader": "^0.8.0",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "tether": "^1.1.1",
    "velocity-animate": "^1.2.3",
    "webpack": "^1.12.9",
    "webpack-sources": "^0.1.0"
  }
}
 

Edited December 16, 2016 by Eric Monnier (see edit history)

[Atch]

tapez :  " $ npm install "

 

Sur windows ( j'utilise PowerShell) vous devez avoir un truc comme cela :

c:\www\maboutique\themes\montheme\_dev npm install 

Pour installer les composants listés dans votre fichier package.json

[Eric Monnier]

Merci,

cela fonctionne.

[Web Curator]

Hi There,

 

Could someone translate the post, I have the same problem but I can't reach the solution

 

Regards