Examples for overriding scss conflicts and working with bootstrap 4

[labkey-martyp]

Rationale

The LabKey framework automatically brings in a number of css dependencies including Bootstrap 3 dependencies and some custom LabKey styles. This PR shows how you can override those styles to work with Bootstrap 4 instead of Bootstrap 3, as well as overriding other LabKey styles.

The two methods shown here

• Override the Bootstrap 3 and LabKey styles directly in helloWorld.scss. Bootstrap 4 styles can be directly included (or cut and paste in) using the bootstrap-scss package added to the dependencies.
• Create a shadow DOM to isolate the react app from LabKey styles and import app styles directly. This is not fully implemented. There is an example how to create the shadow DOM but the scss loading for the app would need to be changed.

The examples are solely in the HelloWorld app. The TodoList app will not work in this branch as it is using Bootstrap 3 which is no longer a dependency.

I tried to mark the changes for the two approaches all with TODO comments.

Changes

Override scss and Bootstrap 4

• helloWorld.scss
• HelloWorld.tsx
• package.json

Shadow DOM

• app_shadow.template.html
• prod.config.js
• app.tsx
• dev.tsx