When I try to import CSS via webpack(import (./index.css)) I'm getting this error:
3: import './index.css';
^^^^^^^^^^^^^ ./index.css. Required module not found
I have a structure like ComponentName→(index.js, index.css), so that each component has all dependencies inside.
I tried this hack but it didn't work for me. Could I just ignore it somehow?
Add this to your flow config
[options]
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/CSSModuleStub.js'
And add create a file to your root CSSModuleStub.js:
// @flow
type CSSModule = { [key: string]: string }
const emptyCSSModule: CSSModule = {}
export default emptyCSSModule
If you want clean path, you can adjust like this
[options]
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/stub/css-modules.js'
And so rename CSSModuleStub.js to flow/stub/css-modules.js.
While we are at it, if you need some others stubs (eg: for url-loader) here is another example
Create flow/stub/url-loader.js
// @flow
const s: string = ""
export default s
And add
module.name_mapper='.*\.\(svg\|png\|jpg\|gif\)$' -> '<PROJECT_ROOT>/flow/stub/url-loader.js'
if you use url-loader for svg, png, jpg and gif. This will allow Flow to make the correct module replacement (url-loader returns a string (base64 or file-loader path).
For example if you do
import logoSVG from "./logo.png"
logoSVG.blah.stuff() // <-- flow will throw here
Flow will throw an error.
In order to not have to declare CSSModule for every project, I've published an npm package that does so:
https://www.npmjs.com/package/css-module-flow
https://github.com/ckknight/css-module-flow
Thanks @MoOx, this is great!! Any suggestions on a stub for webpack bundle loader?
I was thinking something like this...
module.name_mapper='^bundle?[a-zA-Z0-9$_]+$' -> '<PROJECT_ROOT>/flow/stubs/bundle-loader.js.flow'
require('bundle?lazy&name=bundleName!path/to/file')
