I’m fairly new to Angular and SCSS, but have managed to get the Okta sign-in widget working with NPM imports. However, I seem to be missing something when trying to use the
node_modules content for styling. The widget looks fine (like the live widget) if I edit
index.html to include the following:
<link href="https://global.oktacdn.com/okta-signin-widget/4.3.2/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/> <link href="https://global.oktacdn.com/okta-signin-widget/4.3.2/css/okta-theme.css" type="text/css" rel="stylesheet"/>
node_modules rather than the CDN. I noticed there are SCSS files in the module, but when I try to import them into the SCSS file for my login component, there are heaps of broken relative URLs for images (
@import "~@okta/okta-signin-widget/dist/sass/okta-sign-in.scss"; @import "~@okta/okta-signin-widget/dist/sass/okta-theme.scss";
Even if I manually change all the URLs in the
node_modules tree to eliminate the compile errors, the themed style is gone - like no style has been applied at all. In any case, changing the URLs in the
node_modules tree just feels really wrong. It’s a lot of work and would have to be redone every time I upgrade the widget version with NPM.
I use similar imports to pull Bootstrap styles in
styles.css, which works without a problem. It makes no difference if I move the Okta imports to
styles.css, the URLs are broken and the widget doesn’t seem to use the stylesheets.
Given I’m already installing the widget with NPM, what else do I need to do to get my app to read the Okta theme SCSS? I’d prefer not to have to rely on the CDN and this half-half way of doing things (CDN for styles, NPM for JS) doesn’t make sense.