Amplify-js: Theme not available on amplify-angular

[alsco77]

Describe the bug
CSS files are not being correctly linked from the aws-amplify-angular/theme.css file, meaning that none of my front end components (when using amplify-authenticator-ionic framework="Ionic") show with any styling.

To Reproduce
Steps to reproduce the behavior:

1. Fresh install of both aws-amplify and aws-amplify-angular
2. Navigate to node_modules/aws-amplify-angular/theme.css
3. Attempt to navigate to ~@aws..../Theme.css by ctrl + click (or use this link manually)
4. See that the file is not linked correctly

Expected behavior
Import statement should reference the specified Theme.css file and thus link up the style sheets correctly for use in the app

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ubuntu 18.04
• Editor VsCode

[d2kx]

I think you need to install @aws-amplify/ui manually. It was not part of the dependencies of either aws-amplify nor aws-amplify-angular last time I checked.

[henkesde92]

I successfully installed the UI package using:

npm install -S @aws-amplify/ui

But I still don't have a 'ui' folder in my node_modules/@aws-amplify and thus the styles can't be loaded.

Can someone check this please?

[CGregoryDunn]

I'm seeing the same behaviour as @alsco77 on macOS 10.14

[haverchuck]

@CGregoryDunn @aldo-roman @henkesde92 - Is this issue pesistent with the latest versions? I've been unable to reproduce.

[aldo-roman]

I am unable to reproduce either. Notice I added styles as per instructed on docs, and not as per this bug:

// styles.scss
@import '~aws-amplify-angular/theme.css';

Also, it seems the bundler/sass-compiler is not looking at the correct directory on the error.
I notice the bundler is rollup, but the tilde operator ~ is native to webpack.

So, there are some possible root causes to this bug. Either case, unable to reproduce on my side so far.

[jordanranz]

FYI, we have started an RFC discussion for a proposed Amplify UI Component refactor to increase customizability and flexibility for our components. Please feel free to add any additional comments to the following issue:

https://github.com/aws-amplify/amplify-js/issues/3279

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[kinetik06]

I don't know who needs to see this, but on my machine, it was theme.css (all lowercase) not Theme.css

[DKFletcher]

thanks kinetik saved my bacon today 😊