Frontend - Vite, SCSS, JS

Note : le fichier .github/copilot-instructions.md mentionne gulp ; c'est obsolete. Le pipeline reel est Vite (vite.config.js + vite.config.helper.js). Il n'y a pas de gulpfile dans le repo.

Pipeline Vite

Configuration : src/Web/vite.config.js (et helper vite.config.helper.js pour les entrees SCSS/JS, le nettoyage et la purge CSS).

• root: "." (donc src/Web), base: "/", emptyOutDir: false (ne vide pas wwwroot).
• Entrees : getJsEntries() + getSassEntries() (helper).
  • JS : sortie js/[name].js (chunks dans js/chunks/).
  • CSS : un fichier .css par theme -> renomme en css/{theme}/main.css (le prefixe styles- est retire).
• PostCSS : postcss-sort-media-queries, autoprefixer, combine-duplicated-selectors ; en prod uniquement : purgeCss() + cssnano.
• SCSS : API modern-compiler, deprecations silencieuses (if-function, global-builtin, color-functions, import).
• Prod : minification Terser (drop_console), sourcemaps off. Dev : sourcemaps on, pas de minify, plus rollup-plugin-visualizer (rapport scripts/logs/stats.html).
• Plugins : cleanupScssJs() (helper) et vite-plugin-live-reload (watch wwwroot/css|js).
• Alias : @ -> scripts, @styles -> styles.

Scripts npm (package.json, executer depuis src/Web)

Script	Action
npm run dev	vite build --mode development puis watch (chokidar) sur styles/**/*.scss et scripts/**/*.js
npm run build	build one-shot
npm run build:prod	eslint scripts/**/*.js puis vite build --mode production (utilise par le CI/Docker)
npm run lint / lint:fix	eslint

SCSS

Sources dans src/Web/styles/ :

• racine base/ : _bootstrap_custom.scss, _bootstrap_variables.scss, _btn.scss, _forms.scss, _typography.scss, _utils.scss + sous-dossiers elements/, layout/, pages/, sections/, splide/, fonts/.
• themes/default/main.scss : point d'entree du theme (un seul theme default aujourd'hui). Compile -> wwwroot/css/default/main.css.

Bootstrap 5.3 vient de node_modules ; tokens surcharges dans base/_bootstrap_variables.scss.

JavaScript

Sources dans src/Web/scripts/ :

• index.js : point d'entree principal.
• modules/ : un fichier par fonctionnalite (cookiesConsent.js, directoryCraftsmen.js, jemaForm.js, jemaTimer.js, newsletterForm.js, forms.js, formsValidation.js, switchLanguages.js, blogPage.js, readMoreArticle.js, readMoreCity.js, firstWordStyling.js, setJemaInfoHeight.js, exampleSection.js).
• helpers/, splide/ : utilitaires et integration carrousel Splide.
• JS vanilla (pas de framework SPA).

Consentement cookies (regle importante)

Marketing/analytics (GTM/GA4) ne se chargent qu'apres consentement. La logique est dans scripts/modules/cookiesConsent.js (acceptCookies() injecte les scripts au runtime), branchee depuis le layout Views/Layouts/_MasterLayout.cshtml, via vanilla-cookieconsent. Ne jamais charger ces scripts en dur dans le layout.

Important

• Ne jamais editer src/Web/wwwroot/css|js (genere par Vite). Editer styles/ et scripts/.
• En Docker, le build copie explicitement wwwroot/css/* et wwwroot/js/* dans le publish (car dotnet publish ignore ces fichiers generes a la volee) - voir ../architecture/build-deploy.md.

Contributors

No contributors

Changelog

No recent changes