codegouvfr / codegouvfr/react-dsfr

Incompatibilité avec postcss-import

Open
#358 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
496
Forks
99
Avg merge
15h 36m
Merged PRs (30d)
4

Description

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.