codegouvfr / codegouvfr/react-dsfr

Incompatibilité avec postcss-import

Aperta
#358 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
496
Fork
99
Merge medio
15h 36m
PR unite (30g)
4

Descrizione

Dans le cade de [France Chaleur urbaine](https://france-chaleur-urbaine.beta.gouv.fr), 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](https://tailwindcss.com/docs/installation/using-postcss)
2. Installer toutes les libs necessaires `yarn add -D tailwindcss postcss autoprefixer postcss-import`
3. Ajouter ce code dans `postcss.config.js`
```js
module.exports = {
plugins: [
'postcss-import',
'tailwindcss',
'autoprefixer',
],
};
```
4. Lancer en dev et naviguer

## Résolution:
Remplacer `postcss.config.js` par

```js
module.exports = {
plugins: [
[
'postcss-import',
{
filter: (path) => !path.includes('dsfr'),
},
],
'tailwindcss',
'autoprefixer',
],
};
```

Merci pour votre aide

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Reproduce the failure with the postcss.config.js configuration and inspect the imported assets referenced by @codegouvfr/react-dsfr/assets/dsfr_plus_icons.css, especially the missing arrow-go-back-line.svg path. Compare the behavior with postcss-import enabled and the documented filter workaround; done means the Next.js development build works with Tailwind and the DSFR without requiring that workaround.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
next.js, react, tailwindcss, typescript
Ambito
build-system, frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.