css-module-flow-loader
Webpack loader for creating Flow type definitions based on CSS Modules files.
This gives you:
- flow type safety showing usage of non existing classes
- auto-completing for css files in most editors
How it works
Given the following css file using CSS Modules:
css-module-flow-loader
creates the following .flow file next to it:
// @flow strict/* This file is automatically generated by css-module-flow-loader */declare moduleexports: | +'my_class': string;|;
How to use
The css-module-flow-loader
need to be added right after style-loader
:
$ npm i -D css-module-flow-loader
test: /\.css$/ // or the file format you are using for your CSS Modules use: 'style-loader' 'css-module-flow-loader' // other loaders here ...
Troubleshooting
Support for other file extensions
To support .scss
, .sass
or similar files extensions you need to update your .flowconfig
file with the following section:
[options]
# Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
module.file_ext=.sass
// other files used by flow
Without this Flow might error out with Required module not found
.