codegouvfr / codegouvfr/react-dsfr
Incompatibilité avec postcss-import
- 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
Assessment
This issue has not been assessed yet.