Laravel-Mix, usage de compass

leknoppix
PHP Laravel

Bonjour,

Je poste sur ce topic car c'est lié à Laravel et pas forcément à nodeJs.
Je suis en train de recoder un site internet et je suis en train de tester laravel-mix, avec la configuration de base. Enfin, avec la désactivation de la notification de laravel-mix.

let mix = require('laravel-mix');
mix.disableNotifications();
mix.js('resources/assets/js/app.js', 'public/js').version()
   .sass('resources/assets/sass/app.scss', 'public/css').version();

Ce que je fais

Comme dit plus haut, je recode un site donc je repars à 0 niveau CSS. J'ai donc opté pour une réorganisation du css. Voici un peu la structure:

Pour mon besoin de mon design, j'essaie d'intégrer compass afin d'inclure box-shadow .....

@import "compass";
@import "compass/css3";

.....

@include box-shadow(0 10px 0 1);

Ce que j'obtiens

Hors, ce que j'obtiens est une erreur de compilation. 

Module build failed: ModuleBuildError: Module build failed: 
@import "compass";

Si je comprend bien, il ne trouve pas compass. En fait, j'ai l'impression qu'il recherche, lors de compilation le fichier _compass.scss et non charge le compass du système.

Auriez vous une idée?

lemirandais

2 réponses

leknoppix
Auteur
Réponse acceptée

Finalement, je suis parti sur ces Mixins => https://github.com/Igosuki/compass-mixins/tree/master/lib

lakamark

Bonjour,
Je ne suis pas sur, mais compass n'est plus maintenue. Si tu utilise box-shadow tu n'a plus besoin de faire un auto-prefixage. Car les navigateurs moderne sont capable de lire cette règle css. tu a juste besoin de faire ceci:

.my_style {
box-shadow: 5px 10px 20px #888888;
}

Je vois que tu utlise laravel-mix pour compiller les css et js. Il y a un sytème d'auto-prefixage qui est activé par défaut. Tu peut utliser des propriété css très moderne et mix-laravel va détecter les règles où certains navigateur ne comprenderais pas sans mettre leur prefix "-ms" ou "-webkit". Par exemple, j'utilise des grill avec des display flex une propriété css moderne que certain navigateur ne sont pas capable de l'interprété. :

app.scss

.test {
  display: flex;
  flex-wrap: wrap;
}

app.css

.test {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

Dans ma situation, je n'utlise plus compass, car cette une terchologie trop vielle. Peut-être qu'ils ont mis à jour. J'utilise du sass et webpack pour compiler mes fichier css de mon site web.

Bonne chance.