Comment empêcher le navigateur de charger des fichiers SCSS inexistants et forcer l’utilisation de son fichier CSS

Lorsque l’on utilise SCSS, il peut arriver que les styles générés à partir des fichiers .scss prennent le dessus sur un fichier CSS personnalisé. Cela peut poser problème si l’on souhaite garder un contrôle total sur l’apparence de son site sans dépendre des fichiers SCSS. Voici quelques solutions pour forcer l’utilisation de son propre fichier CSS.

Supprimer la référence aux fichiers source map

Si votre fichier CSS a été généré à partir de SCSS, il peut contenir une ligne indiquant une source map, comme :

/*# sourceMappingURL=style.css.map */

Cette ligne permet aux outils de développement de retrouver le fichier SCSS d’origine. Si ce fichier .map est absent ou erroné, le navigateur peut essayer de charger des fichiers SCSS inexistants. Supprimez cette ligne pour éviter ce comportement.

Désactiver la compilation SCSS si elle n’est pas nécessaire

Si vous ne souhaitez pas utiliser SCSS, assurez-vous qu’aucun processus de compilation (comme Webpack, Gulp ou un préprocesseur intégré à un CMS) ne génère automatiquement un fichier CSS à partir de SCSS. Vous pouvez vérifier si des tâches de compilation sont en cours et les désactiver.

Forcer l’utilisation de son fichier CSS

Si des styles provenant de SCSS prennent le dessus sur votre CSS, assurez-vous que votre fichier mes-styles.css est chargé en dernier dans votre code. Un fichier CSS chargé après un autre a la priorité sur les styles précédents.

Utiliser des sélecteurs plus spécifiques

Si le CSS généré par SCSS applique des styles plus forts, il peut être nécessaire d’augmenter la spécificité de vos sélecteurs CSS. Par exemple, au lieu d’écrire :

button {
    background-color: red;
}

Utilisez un sélecteur plus précis :

body .my-button {
    background-color: red;
}

Utiliser !important en dernier recours

Si certains styles SCSS sont difficiles à écraser, vous pouvez utiliser !important pour forcer vos styles :

button {
    background-color: red !important;
}

Cette méthode doit être utilisée avec précaution, car elle peut compliquer la gestion des styles à long terme.