Repository navigation
Incompatibilité avec postcss-import #358
Description
Dans le cade de France Chaleur urbaine, nous souhaitons utiliser tailwind en plus du DSFR (ceci, notamment pour les classes utilitaires responsive)
En configurant postcss (que nous utilisons avec next), j'ai rencontré le problème suivant
⨯ ./node_modules/.pnpm/@codegouvfr+react-dsfr@1.16.8/node_modules/@codegouvfr/react-dsfr/assets/dsfr_plus_icons.css:4:1
Module not found: Can't resolve '../../icons/system/arrow-go-back-line.svg'
Reproduction:
- Installer tailwind
- Installer toutes les libs necessaires
yarn add -D tailwindcss postcss autoprefixer postcss-import - Ajouter ce code dans
postcss.config.js
module.exports = {
plugins: [
'postcss-import',
'tailwindcss',
'autoprefixer',
],
};- Lancer en dev et naviguer
Résolution:
Remplacer postcss.config.js par
module.exports = {
plugins: [
[
'postcss-import',
{
filter: (path) => !path.includes('dsfr'),
},
],
'tailwindcss',
'autoprefixer',
],
};Merci pour votre aide
Activity
ddecrulle commentedon Jan 15, 2025
Bonjour,
Je viens de tester avec un projet Vite et je n'ai pas réussi à reproduire le problème.
J'ai également essayé avec le starter Next.js App Router et n'ai pas reproduit le souci également. Tu peux consulter le code à cette adresse : Starter Next.js.
Es-tu en mesure, à partir de ce starter, de fournir un exemple permettant de reproduire le problème ?
Merci d'avance pour votre retour et bonne journée !
enguerranws commentedon Mar 3, 2025
NB : Tailwind et le DSFR ne sont pas prévu pour fonctionner ensemble. Il y a des conflits de règles en tailwind.css et dsfr.css. Sur Immersion Facilitée, les deux ont cohabité quelques mois, à renfort de fixes CSS pas jolis.
Tout ça pour dire : même si l'import via postcss fonctionne, vous allez avoir d'autres soucis ensuite.