diff --git a/apps/dav/src/components/AvailabilityForm.vue b/apps/dav/src/components/AvailabilityForm.vue
index 2536643ae43..04a824a73bd 100644
--- a/apps/dav/src/components/AvailabilityForm.vue
+++ b/apps/dav/src/components/AvailabilityForm.vue
@@ -151,8 +151,8 @@ async function save() {
 .grid-table {
 	display: grid;
 	margin-bottom: 32px;
-	grid-column-gap: 24px;
-	grid-row-gap: 6px;
+	column-gap: 24px;
+	row-gap: 6px;
 	grid-template-columns: min-content auto min-content;
 	max-width: 500px;
 }
diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
index 6ecebc84c6a..cf0f89ed389 100644
--- a/apps/files/src/views/TemplatePicker.vue
+++ b/apps/files/src/views/TemplatePicker.vue
@@ -351,7 +351,7 @@ export default defineComponent({
 
 	&__list {
 		display: grid;
-		grid-gap: calc(var(--margin) * 2);
+		gap: calc(var(--margin) * 2);
 		grid-auto-columns: 1fr;
 		// We want maximum 5 columns. Putting 6 as we don't count the grid gap. So it will always be lower than 6
 		max-width: calc(var(--fullwidth) * 6);
diff --git a/apps/oauth2/src/views/AdminSettings.vue b/apps/oauth2/src/views/AdminSettings.vue
index 56f021c24b1..b4307bb44ca 100644
--- a/apps/oauth2/src/views/AdminSettings.vue
+++ b/apps/oauth2/src/views/AdminSettings.vue
@@ -160,7 +160,7 @@ async function addClient() {
 		overflow: hidden;
 		padding: var(--default-grid-baseline);
 		text-wrap: wrap;
-		word-wrap: break-word;
+		overflow-wrap: break-word;
 	}
 
 	tbody tr {
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index 9908a8978d9..a80ab6a5d9f 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -3,9 +3,10 @@
  * SPDX-FileCopyrightText: 2011 Jan-Christoph Borchardt, http://jancborchardt.net
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
+
 @use 'sass:math';
-@use 'functions';
+@use 'variables.scss';
+@use 'functions.scss';
 
 input {
 	&#openid, &#webdav {
@@ -92,7 +93,7 @@ select {
 	padding: 20px;
 	max-width: 1700px;
 	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
-	grid-column-gap: 10px;
+	column-gap: 10px;
 
 	.section {
 		padding: 10px 10px;
diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index b6ec8bad05d..330a0a922ed 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -395,7 +395,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use './Users/shared/styles' as *;
+@use './Users/shared/styles.scss' as *;
 
 .empty {
 	:deep {
diff --git a/apps/settings/src/components/Users/UserListFooter.vue b/apps/settings/src/components/Users/UserListFooter.vue
index 0c84b25d6f0..03078e90116 100644
--- a/apps/settings/src/components/Users/UserListFooter.vue
+++ b/apps/settings/src/components/Users/UserListFooter.vue
@@ -86,7 +86,7 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@use './shared/styles';
+@use './shared/styles.scss';
 
 .footer {
 	@include styles.row;
diff --git a/apps/settings/src/components/Users/UserListHeader.vue b/apps/settings/src/components/Users/UserListHeader.vue
index cfa73c2bc99..c3f50c7700c 100644
--- a/apps/settings/src/components/Users/UserListHeader.vue
+++ b/apps/settings/src/components/Users/UserListHeader.vue
@@ -155,7 +155,7 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@use './shared/styles';
+@use './shared/styles.scss';
 
 .header {
 	border-bottom: 1px solid var(--color-border);
diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue
index d0e58eb6b59..c70b410c33d 100644
--- a/apps/settings/src/components/Users/UserRow.vue
+++ b/apps/settings/src/components/Users/UserRow.vue
@@ -1035,7 +1035,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use './shared/styles';
+@use './shared/styles.scss';
 
 .user-list__row {
 	@include styles.row;
diff --git a/apps/theming/src/components/UserSectionBackground.vue b/apps/theming/src/components/UserSectionBackground.vue
index 68e82f246b7..b06ea89ac90 100644
--- a/apps/theming/src/components/UserSectionBackground.vue
+++ b/apps/theming/src/components/UserSectionBackground.vue
@@ -264,7 +264,7 @@ async function pickFile() {
 		width: 168px;
 		margin: var(--default-grid-baseline);
 		text-align: center;
-		word-wrap: break-word;
+		overflow-wrap: break-word;
 		hyphens: auto;
 		border: 2px solid var(--color-main-background);
 		border-radius: var(--border-radius-large);
diff --git a/apps/theming/src/components/UserSectionPrimaryColor.vue b/apps/theming/src/components/UserSectionPrimaryColor.vue
index 88985d38295..ca66001c5eb 100644
--- a/apps/theming/src/components/UserSectionPrimaryColor.vue
+++ b/apps/theming/src/components/UserSectionPrimaryColor.vue
@@ -146,7 +146,7 @@ function numberToHex(numeric: string): string {
 	height: 96px;
 	width: 168px;
 
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 	hyphens: auto;
 
 	border: 2px solid var(--color-main-background);
diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue
index ef584e3c9f3..53d515eec13 100644
--- a/apps/workflowengine/src/components/Operation.vue
+++ b/apps/workflowengine/src/components/Operation.vue
@@ -43,5 +43,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@use "./../styles/operation" as *;
+@use "./../styles/operation.scss" as *;
 </style>
diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue
index 90d2659b9eb..9444056bec6 100644
--- a/apps/workflowengine/src/components/Workflow.vue
+++ b/apps/workflowengine/src/components/Workflow.vue
@@ -157,7 +157,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@use "./../styles/operation";
+	@use "./../styles/operation.scss";
 
 	#workflowengine {
 		border-bottom: 1px solid var(--color-border);
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 6b3d9fde4c2..19e78b5c7c2 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -3,9 +3,10 @@
  * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
+
 @use 'sass:math';
-@use 'functions';
+@use 'variables.scss';
+@use 'functions.scss';
 
 @media screen and (width < #{variables.$breakpoint-mobile}) {
 	// Make the body full width on mobile
diff --git a/core/css/exception.scss b/core/css/exception.scss
index 2c44b54a20f..f25df842bcb 100644
--- a/core/css/exception.scss
+++ b/core/css/exception.scss
@@ -4,10 +4,10 @@
  */
 
 li {
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 }
 
 pre {
 	white-space: pre-wrap;
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 }
diff --git a/core/css/guest.scss b/core/css/guest.scss
index 5daab72a7d8..9e621b8aa1a 100644
--- a/core/css/guest.scss
+++ b/core/css/guest.scss
@@ -3,7 +3,8 @@
  * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'animations';
+
+@use 'animations.scss';
 
 /* Default and reset */
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
@@ -570,7 +571,7 @@ form #selectDbType {
 	display: flex;
 	flex-direction: column;
 	text-align: start;
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 	border-radius: 10px; /* --border-radius-large */
 	cursor: default;
 	-moz-user-select: text;
diff --git a/core/css/icons.scss b/core/css/icons.scss
index df6edea1f15..7e59e3d30c0 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -2,8 +2,9 @@
  * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
-@use 'functions';
+
+@use 'variables.scss';
+@use 'functions.scss';
 
 /* GLOBAL ------------------------------------------------------------------- */
 [class^='icon-'], [class*=' icon-'] {
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 087413eb685..8f537ca05fa 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -3,9 +3,10 @@
  * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
+
 @use 'sass:color';
-@use 'functions';
+@use 'variables.scss';
+@use 'functions.scss';
 
  /* Specifically override browser styles */
 input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 8211f2cd63e..5495df2316f 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -2,7 +2,8 @@
  * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
+
+@use 'variables.scss';
 
 @media only screen and (width < #{variables.$breakpoint-mobile}) {
 
diff --git a/core/css/server.scss b/core/css/server.scss
index 22ba1d38543..455d03c02a6 100644
--- a/core/css/server.scss
+++ b/core/css/server.scss
@@ -2,16 +2,18 @@
  * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'styles';
-@use 'inputs';
-@use 'header';
-@use 'icons';
-@use 'apps';
-@use 'global';
-@use 'fixes';
-@use 'mobile';
-@use 'tooltip';
-@use 'public';
+
+@use 'styles.scss';
+@use 'inputs.scss';
+@use 'header.scss';
+@use 'icons.scss';
+@use 'apps.scss';
+@use 'global.scss';
+@use 'fixes.scss';
+@use 'mobile.scss';
+@use 'tooltip.scss';
+@use 'public.scss';
+
 // If you include .css, it will be imported as url
-@use '../../node_modules/@nextcloud/dialogs/dist/style' as *;
-@use '../../node_modules/@nextcloud/password-confirmation/dist/style' as *;
+@use '../../node_modules/@nextcloud/dialogs/dist/style.css' as *;
+@use '../../node_modules/@nextcloud/password-confirmation/dist/style.css' as *;
\ No newline at end of file
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 207a1a8545e..89c4f74857d 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -3,8 +3,9 @@
  * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
 @use 'sass:math';
-@use 'variables';
+@use 'variables.scss';
 
 :root {
 	font-size: var(--default-font-size);
diff --git a/core/css/toast.scss b/core/css/toast.scss
index 5c879cc80cd..f49cd32c297 100644
--- a/core/css/toast.scss
+++ b/core/css/toast.scss
@@ -2,8 +2,9 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
-@use 'functions';
+
+@use 'variables.scss';
+@use 'functions.scss';
 
 .toastify.toast {
 	min-width: 200px;
diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss
index 7f8b76eea06..102543f4365 100644
--- a/core/css/tooltip.scss
+++ b/core/css/tooltip.scss
@@ -20,7 +20,6 @@
     white-space: normal;
     word-break: normal;
     word-spacing: normal;
-    word-wrap: normal;
     overflow-wrap: anywhere;
     font-size: 12px;
     opacity: 0;