How to only use base styles instead of whole theme from 4.29+?

[sandrooco]

IMPORTANT

• My question is related to the samples and content within this repository. For all other issues, open a ticket with Esri Technical Support or post your question in the community forum.
• I have checked for existing issues to avoid duplicates. If someone has already opened an issue for what you are experiencing, please add a 👍 reaction and comment as necessary to the existing issue instead of creating a new one. You can also refer to this repo's troubleshooting guide for hints and suggestions.

Actual behavior

In 4.29 if you only import the base css (@arcgis/core/assets/esri/themes/base/_View.scss) you will receive an error:

Undefined variable: font-family: $font-family;

This worked until and including 4.28.

Expected behavior

In 4.28 we were able to use the base styles (@arcgis/core/assets/esri/themes/base/_View.scss) instead of the whole theme (@arcgis/core/assets/esri/themes/light/main.css) which improved our bundle size massively. Our app is very simple and we don't need most of the widgets.

This would work if _View.scss would use @use instead of "global" scss imports.

Reproduction sample

See angular.json, line 36. Stackblitz example

Reproduction steps

open the example, start it and see the error

Reproduction browser

Chrome 123 on macOS (Sonoma)

Operating System

macOS 10.15.7

[andygup]

instead of the whole theme (@arcgis/core/assets/esri/themes/light/main.css) which improved our bundle size massively

@sandrooco are you able to use the CDN's main.css instead of the local css from node_modules? Using that pattern results in minimal additional build output (~84 bytes). And, the app will request the CSS and assets from the CDN:

// styles.css
@import url('https://js.arcgis.com/4.29/@arcgis/core/assets/esri/themes/light/main.css');

Also, if you don't need to css globally then we recommend including it in the component or parent of the component(s) level. Moving the location of where the css gets built can also reduce or eliminate some of css build warnings.

[sandrooco]

Hi @andygup, thanks for your feedback.
Using a cdn isn't an option for a couple of reasons. First and foremost it doesn't solve the problem: yes the build will be smaller but the client/browser still has to load the whole thing.

In the end it doesn't matter if the stylesheet (I only use 5% of) is loaded from a CDN or my own host.