Flow module.name_mapper not working for aliases in Create React App

Question

I am trying to include the aliases from my webpack.config.js file in mt .flowconfig file, but I am still getting the "Can't resolve module" error.

webpack.config.js:

const path = require('path');

module.exports = config => {
    config.resolve.alias = {
        styles: path.resolve(__dirname, './src/styles/components/')
    };
    return config;
}

.flowconfig:

[ignore]

[include]

[libs]

[lints]

[options]
module.name_mapper='^styles\/\(.*\)$' -> '<PROJECT_ROOT>/src/styles/components/\1'

[strict]

My component:

// @flow
import * as React from 'react';
import 'styles/global/Container.scss';

type Props = {
    childDirection?: string,
    childAlign?: string,
    childJustify?: string,
    children: React.Node
};

const Container = (props: Props) => {
    return (
        <div className="Container">
            <div className="Container--padding">
                {props.children}
            </div>
        </div>
    );
}

export default Container;

When I hover over the style import (import 'styles/global/Container.scss';) I get the error:

Cannot resolve module styles/global/Container.scss. Flow(InferError)