Get Okta Sign-In Widget style from NPM

Hello,

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"/>

I’ve installed the widget module with NPM and all the JavaScript is reading it from 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 (auth.component.scss):

@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.

Thanks,
Flic

I don’t think the latest version uses a CSS file for the theme anymore. The following docs should help:

https://developer.okta.com/code/javascript/okta_sign-in_widget/

Hi @mraible,

Thanks for the reply. I’ve read that linked document at length and it mentions Webpack when using NPM. I know Angular 10 uses Webpack behind the scenes, but I’ve never explicitly managed it myself. It also mentions updating okta-theme.scss - I’ve found this file but as I said in my question, the relative image URLs are broken in the two SCSS files. I suspect the step I’m missing is configuring Webpack in some special way - I just don’t know how to do this.

I guess I’ll have to do some research on Webpack. Perhaps it is able to properly interpret the relative URLs and spit out CSS someplace the app can use it.

Regards,
Flic

An update to my last, for anyone else struggling with this.

I’ve found I can add the CSS (not SCSS) file as a style in my angular.json file, like so:

"styles": [
  "src/styles.scss",
  "node_modules/@okta/okta-signin-widget/dist/css/okta-sign-in.min.css"
]

The <link/> tags (pointing to the CDN) can subsequently be removed from index.html. Nothing at all is required in my component’s SCSS file (auth.component.scss).

It’s not ideal as I’d prefer to do all my styling in SCSS, but at least now the styles are pulled in from the local NPM package, rather than going back to the CDN. I’m not doing any CSS customisation at the moment anyway, so it doesn’t bother me (for now).

If I figure out how to make the SCSS side of things work, I’ll report back accordingly.