using css-modules exported variables?

[raptoria]

Hi all, I'm new to CRA.
I see that the example boilerplate is importing the css like so,
import './App.css';

when I attempt to import the CSS as a variable, eg.
import * as styles from './App.css';

<header className="App-header" style={{background:styles.specialwhite}}>

I get the error, 'Cannot find module ./App.css'

I'm using Typescript. Any ideas on how to get this to work? I'd prefer not to use requires. I don't see .css.d.ts being generated anywhere. Is there a way to specify this without ejecting CRA and adding typed-css-modules?

[bugzpodder]

Hi raptoria, CSS modules is a breaking change and you'd need to use CRA 2.0 in order to get it to work.
Please see #3815 on a list of changes supported in CRA 2 as well as how to get an alpha build to test out.

[raptoria]

I'm using react-script-ts. I poked around that package.json and I can't see what version of CRA it's using. The react-script-ts I'm using is version 2.15.1. Is there another way to use CRA V 2.0 with typescript other than react-script-ts?

[bugzpodder]

i believe react-script-ts is a fork of react-scripts, and they have yet to merge any changes from CRA v2. You can follow along: wmonk/create-react-app-typescript#284

[Timer]

Hi @raptoria!
Like @bugzpodder said, this feature is only available in react-scripts@^2 (currently in beta); react-scripts-ts is a completely different project which is long-ago forked from react-scripts.
You can subscribe to wmonk/create-react-app-typescript#284 for updates.

Sorry we couldn't be more helpful!

edit: also -- there's no other way to use typescript, sorry.