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:
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):
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 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.
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.
It seems like this would be unrelated to the relative paths breaking in your styles, is that correct? If so, how did you resolve that issue?
I’ve currently found no way of fixing this via configuration. The only way I can see resolving this at present in Angular 10 is to copy the styles and modify them the way I need to which is problematic for future updating.
It seems when you use the SCSS directly, WebPack does some compilation behind the scenes which doesn’t play nicely with the relative paths. It’s likely just some WebPack config required but my Angular-foo is not strong enough to figure it out (yet). The above worked for me in my basic use case. I would think you should be able to just override the relevant styles with the component’s SCSS (or CSS) file, rather than having to copy+modify each time. I haven’t tested this myself though.
Interesting. I gave it a try from the component like you have it. I would definitely prefer this approach if the asset paths within the styles were able to resolve, but alas they still do not. That seems to be the crux of the issue for me.
Example of one of the compilation errors:
Can't resolve '../font/myFontFile.woff' in 'node_modules/@okta/okta-signin-widget/dist/css'
A head scratcher, since this seems like it matches and should find the assets.
In the end, I’ve created a second stylesheet for the component (similar to what you did), but instead of a reference to the styles in the package, I have been forced to create a local component copy of the styles until my Angular foo improves. For now, perhaps this is Angular Jiu Jitsu. I ended up making a configuration change in angular.json that copies over the assets from the package into the application assets (which my local Okta styles copy can reference). There are 190 url() function calls in the styles, so that would be a lot to override.
If anything comes to mind as to what differs between our implementation, let me know (I inferred you’re also on Angular 10?). Thanks again for the response.
Yeah - when I hit a large number of url() calls, I had a go at putting in manual updates more as a curiosity exercise. Didn’t have much success and didn’t pursue it further as it would be painful every time there is an upgrade. As I said originally, this approach just felt wrong.
The only thing that springs to mind seeing that error is to ensure you are using the minified CSS from node_modules, NOT the SCSS. If you want to go down the SCSS route, it looks like you have to get familiar with WebPack so you can fiddle with the config. I had a bit of a look at it, but it was a bit beyond me - I might take another look when my project is more fleshed out and I have some time to devote to it.
I started off on Angular 10 but have since upgraded to 11. I like to live on the edge…up to a point.
