Fix multiple copies of utility classes being loaded by the app (#28802)

* Fix multiple copies of utility classes being loaded by the app

When using SASS's at-import rule for a file containing CSS classes, the
entirity of the imported file is included into that chunk of the JS
bundle. This leads to those class definitions being duplicated multiple
times in the code loaded by the browser. That doesn't happen for mixins,
functions, or SASS variables which are evaluated at compile time.

To prevent those classes from being repeatedly defined, we need to not
import them into multiple bundles. We already load the utility classes
into the root bundle, so we just need to make sure not to import
sass/utils/_module.scss, sass/utils/_flex.scss,
sass/utils/_animations.scss, or sass/utils/_modifiers.scss into any
CSS files which are imported into individual components.

* Canonize import paths for SCSS mixins and functions

We previously imported some .scss files as `src/sass/...` and others as
`sass/...`. This was allowed becuase sass-loader's
`sassOptions.includePaths` included both `src` and `src/sass`. I've made
that more consistent now and removed the redundant include path.

webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss

@@ -1,4 +1,4 @@
-@import 'sass/utils/_mixins';
+@import 'utils/_mixins';
 @import './mixins';
 
 .BillingSubscriptions {

webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss

@@ -1,5 +1,5 @@
-@import 'sass/utils/variables';
-@import 'sass/utils/functions';
+@import 'utils/variables';
+@import 'utils/functions';
 
 .AbstractList {
     padding: 1rem 2rem 2rem 2rem;

webapp/channels/src/components/admin_console/system_user_detail/team_list/team_row.scss

@@ -1,4 +1,4 @@
-@import 'sass/utils/module';
+@import 'utils/variables';
 
 .TeamRow {
     &:nth-child(odd) {

webapp/channels/src/components/admin_console/system_users/system_users.scss

@@ -1,4 +1,4 @@
-@import "sass/utils/_mixins";
+@import 'utils/_mixins';
 
 table.systemUsersTable {
     thead {

webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.scss

@@ -1,5 +1,3 @@
-@import '../../sass/utils/module';
-
 .DndModal {
     width: 600px;
 

webapp/channels/src/components/invitation_modal/invite_view.scss

@@ -1,4 +1,4 @@
-@import 'sass/utils/_mixins';
+@import 'utils/_mixins';
 
 .InviteView {
     &__sectionTitle {

webapp/channels/src/components/link_tooltip/link_tooltip.scss

@@ -1,4 +1,4 @@
-@import 'sass/utils/variables';
+@import 'utils/variables';
 
 .tooltip-container {
     opacity: 0;

webapp/channels/src/components/markdown_image_expand/markdown_image_expand.scss

@@ -1,5 +1,5 @@
-@import "sass/utils/functions";
-@import "utils/variables";
+@import 'utils/functions';
+@import 'utils/variables';
 
 .markdown-image-expand {
     position: relative;

webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.scss

@@ -1,5 +1,3 @@
-@import '../../sass/utils/module';
-
 .post-reminder-modal {
     .modal-body {
         overflow: visible;

webapp/channels/src/components/post_view/reaction/reaction.scss

@@ -1,5 +1,5 @@
-@import 'sass/utils/mixins';
-@import 'sass/utils/functions';
+@import 'utils/mixins';
+@import 'utils/functions';
 
 .reaction-emoji--large img {
     width: 48px;

webapp/channels/src/components/sidebar/unread_channel_indicator/unread_channel_indicator.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@import 'sass/utils/variables';
+@import 'utils/variables';
 
 .nav-pills__unread-indicator {
     position: absolute;

webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import "sass/utils/_mixins";
+@import 'utils/_mixins';
 
 .ThreadItem {
     position: relative;

webapp/channels/src/components/widgets/admin_console/admin_panel.scss

@@ -1,4 +1,4 @@
-@import 'utils/module';
+@import 'utils/variables';
 
 .AdminPanel {
     overflow: hidden;

webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss

@@ -1,4 +1,4 @@
-@import '../../../../sass/utils/module';
+@import 'utils/variables';
 
 .Menu {
     .MenuItem {

webapp/channels/src/components/widgets/menu/menu_wrapper.scss

@@ -1,4 +1,4 @@
-@import 'utils/module';
+@import 'utils/functions';
 
 .MenuWrapper {
     position: relative;

webapp/channels/src/components/widgets/separator/separator.scss

@@ -1,6 +1,6 @@
 @charset 'UTF-8';
 
-@import 'utils/module';
+@import 'utils/functions';
 
 .Separator {
     position: relative;

webapp/channels/src/components/widgets/team_icon/team_icon.scss

@@ -1,6 +1,7 @@
 @charset 'UTF-8';
 
-@import 'utils/module';
+@import 'utils/mixins';
+@import 'utils/variables';
 
 .TeamIcon__content {
     display: flex;

webapp/channels/webpack.config.js

@@ -97,7 +97,7 @@ var config = {
                         loader: 'sass-loader',
                         options: {
                             sassOptions: {
-                                includePaths: ['src', 'src/sass'],
+                                includePaths: ['src/sass'],
                             },
                         },
                     },