Laravel-Mix, usage de compass

Par leknoppix, il y a 7 ans

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:
Aperçu de la structure de mon dossier CSS

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

lakamark, il y a 7 ans

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.