web-dev-qa-db-fra.com

Flux «Module requis introuvable» lors de l'importation d'un fichier CSS

Lorsque j'essaie d'importer CSS via webpack (import (./index.css)), j'obtiens cette erreur:

3: import './index.css';
          ^^^^^^^^^^^^^ ./index.css. Required module not found

J'ai une structure comme ComponentName → (index.js, index.css), de sorte que chaque composant a toutes les dépendances à l'intérieur.

J'ai essayé this hack mais cela n'a pas fonctionné pour moi. Puis-je simplement l'ignorer d'une manière ou d'une autre?

flowtype
29
Roman Makarov

Ajoutez ceci à votre configuration de flux

[options]
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/CSSModuleStub.js'

Et ajoutez créer un fichier à votre racine CSSModuleStub.js:

// @flow
type CSSModule = { [key: string]: string }
const emptyCSSModule: CSSModule = {}
export default emptyCSSModule

Si vous voulez un chemin propre, vous pouvez ajuster comme ceci

[options]
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/stub/css-modules.js'

Et ainsi renommer CSSModuleStub.js à flow/stub/css-modules.js.

Pendant que nous y sommes, si vous avez besoin de quelques autres talons (par exemple: pour url-loader) voici un autre exemple

Créer flow/stub/url-loader.js

// @flow
const s: string = ""
export default s

Et ajouter

module.name_mapper='.*\.\(svg\|png\|jpg\|gif\)$' -> '<PROJECT_ROOT>/flow/stub/url-loader.js'

si tu utilises url-loader pour svg, png, jpg et gif. Cela permettra à Flow d'effectuer le remplacement de module correct (le chargeur d'URL renvoie une chaîne (base64 ou chemin du chargeur de fichiers).

Par exemple, si vous le faites

import logoSVG from "./logo.png"
logoSVG.blah.stuff() // <-- flow will throw here

Flow lancera une erreur.

56
MoOx

Afin de ne pas avoir à déclarer CSSModule pour chaque projet, j'ai publié un package npm qui le fait:

https://www.npmjs.com/package/css-module-flow

https://github.com/ckknight/css-module-flow

1
ckknight

Merci @MoOx, c'est super !! Des suggestions sur un talon pour le chargeur de paquets Webpack?

Je pensais à quelque chose comme ça ...

module.name_mapper='^bundle?[a-zA-Z0-9$_]+$' -> '<PROJECT_ROOT>/flow/stubs/bundle-loader.js.flow'

require('bundle?lazy&name=bundleName!path/to/file')
0
Greg