Incompatibilité avec postcss-import

[martinratinaud]

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:

1. Installer tailwind
2. Installer toutes les libs necessaires yarn add -D tailwindcss postcss autoprefixer postcss-import
3. Ajouter ce code dans postcss.config.js

module.exports = {
  plugins: [
    'postcss-import',
    'tailwindcss',
    'autoprefixer',
  ],
};

4. 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

[ddecrulle]

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 !