Missing Amplify UI Styles in Electron App

I recently discovered the Electron React Boilerplate project and wanted to use the AWS Amplify Authenticator. Lo and Behold: its ugly...

I had used the typical index.tsx import and I could see the CSS output, but for some reason it did not work.

// index.tsx
import "@aws-amplify/ui/dist/style.css";

After much Googling, it turns out that Electron React Boiler plate does some webpack-ing magic under the hood.

The correct way to add the css is to import it in App.global.css:

/* App.global.css */
@import '~@aws-amplify/ui/dist/style.css';

Originally posted on my blog