Includes ten separate copies of the Paragon SCSS

[bradenmacdonald]

This repo uses a bit of an SCSS anti-pattern... it has many separate SCSS files which each start with @import "@openedx/paragon/scss/core/core";

The net result is that Paragon's SCSS rules are included 10 times. If you go to https://home.edx.org/ and use the browser's Inspect tool, you can easily confirm this:

The fix is any of the following:

1. Replace the use of the deprecated @import with the newer @use which avoids this problem. (Edit: or so I thought... but in testing, I can't get it to work. It still duplicates all the rules. I think it only works if you also take approach 2 below).
2. Centralize all your SCSS includes, like course-authoring does so you have one file that includes paragon and then includes all the other SCSS files from your app; or
3. Instead of importing all of Paragon in each file, just import the variables/functions/mixins. I took this approach when I needed to fix this issue for the frontend shell - see the fix for learner-dashboard in this commit. However, Paragon doesn't fully support this yet - so in some cases you have to do "private" imports as you can see in that commit.