add sassOptions and update "@use" lines

apps/app/next.config.ts

@@ -114,6 +114,9 @@ export default (phase: string): NextConfig => {
     },
     transpilePackages:
       phase !== PHASE_PRODUCTION_SERVER ? getTranspilePackages() : undefined,
+    sassOptions: {
+      loadPaths: [path.resolve(__dirname, 'src')],
+    },
     experimental: {
       optimizePackageImports,
     },

apps/app/src/client/components/Common/DrawerToggler/DrawerToggler.module.scss

@@ -1,5 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 
 
 .grw-drawer-toggler :global {

apps/app/src/client/components/CompleteUserRegistrationForm.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/atoms/placeholders/buttons';
+@use 'styles/atoms/placeholders/buttons';
 
 :root {
   .complete-user-registration-form :global {

apps/app/src/client/components/InstallerForm.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/atoms/placeholders/buttons';
+@use 'styles/atoms/placeholders/buttons';
 
 :root {
   .installer-form :global {

apps/app/src/client/components/ItemsTree/ItemsTreeContentSkeleton.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/mixins';
+@use 'styles/mixins';
 
 .text-skeleton-level1 {
   @include mixins.grw-skeleton-text($font-size:16px, $line-height: 40px);

apps/app/src/client/components/LoginForm/LoginForm.module.scss

@@ -1,5 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/atoms/placeholders/buttons';
+@use 'styles/atoms/placeholders/buttons';
 
 .login-form :global {
   //

apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/mixins';
+@use 'styles/mixins';
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .grw-min-height-sub-navigation {

apps/app/src/client/components/Navbar/GrowiNavbarBottom.module.scss

@@ -1,5 +1,5 @@
-@use '~/styles/variables' as var;
-@use '~/styles/mixins';
+@use 'styles/variables' as var;
+@use 'styles/mixins';
 
 .grw-navbar-bottom :global {
   // apply transition

apps/app/src/client/components/Navbar/PageEditorModeManager.module.scss

@@ -1,6 +1,6 @@
 // @mixin page-editor-mode-manager($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/mixins';
+@use 'styles/mixins';
 
 .grw-page-editor-mode-manager :global {
   .btn {

apps/app/src/client/components/PageComment/Comment.module.scss

@@ -1,5 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 @use './comment-inheritance';
 
 .comment-styles :global {

apps/app/src/client/components/PageEditor/EditorNavbarBottom/EditorNavbarBottom.module.scss

@@ -1,6 +1,6 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/variables' as var;
-@use '~/styles/mixins';
+@use 'styles/variables' as var;
+@use 'styles/mixins';
 
 @include mixins.at-editing() {
   .grw-editor-navbar-bottom :global {

apps/app/src/client/components/PageEditor/Preview.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/mixins';
+@use 'styles/mixins';
 
 .page-editor-preview-body :global {
   .wiki {

apps/app/src/client/components/PagePresentationModal/PagePresentationModal.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/modal';
+@use 'styles/modal';
 
 .grw-presentation-modal :global {
   /* stylelint-disable-next-line length-zero-no-unit */

apps/app/src/client/components/PageStatusAlert.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .grw-page-status-alert :global {

apps/app/src/client/components/Sidebar/AppTitle/AppTitle.module.scss

@@ -1,8 +1,8 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/core-styles/scss/variables/growi-official-colors';
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 @use '../button-styles';
-@use '~/styles/mixins';
+@use 'styles/mixins';
 
 // GROWI Logo
 .grw-app-title :global {

apps/app/src/client/components/Sidebar/Custom/CustomSidebarSubstance.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/organisms/wiki-custom-sidebar.scss';
+@use 'styles/organisms/wiki-custom-sidebar.scss';
 
 .grw-custom-sidebar-content :global {
   .wiki {

apps/app/src/client/components/Sidebar/PageCreateButton/CreateButton.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 @use '../button-styles';
 
 .btn-create :global {

apps/app/src/client/components/Sidebar/PageCreateButton/DropendToggle.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 @use '../button-styles';
 
 .btn-toggle :global {

apps/app/src/client/components/Sidebar/RecentChanges/RecentChangesSubstance.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/mixins' as *;
+@use 'styles/mixins' as *;
 
 .grw-recent-changes-resize-button :global {
   line-height: normal;

apps/app/src/client/components/Sidebar/Sidebar.module.scss

@@ -1,6 +1,6 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/variables' as var;
-@use '~/styles/mixins';
+@use 'styles/variables' as var;
+@use 'styles/mixins';
 
 .grw-sidebar :global {
   top: 0;

apps/app/src/client/components/Sidebar/SidebarHead/ToggleCollapseButton.module.scss

@@ -1,6 +1,6 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/variables' as var;
-@use '~/styles/mixins';
+@use 'styles/variables' as var;
+@use 'styles/mixins';
 @use '../button-styles';
 
 .btn-toggle-collapse :global {

apps/app/src/client/components/Sidebar/SidebarNav/SidebarNav.module.scss

@@ -1,5 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 
 .grw-sidebar-nav :global {
   width: var.$grw-sidebar-nav-width;

apps/app/src/client/components/Sidebar/Skeleton/DefaultContentSkelton.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/mixins';
+@use 'styles/mixins';
 
 .grw-default-content-skelton :global {
   .grw-skeleton-text {

apps/app/src/client/components/Sidebar/Tag.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/mixins' as *;
+@use 'styles/mixins' as *;
 
 .grw-tag-list-skeleton {
   height: 90px;

apps/app/src/client/components/Sidebar/_button-styles.scss

@@ -1,4 +1,4 @@
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 @use './variables' as sidebarVar;
 
 

apps/app/src/components/Layout/Admin.module.scss

@@ -1,5 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as *;
-@use '~/styles/mixins';
+@use 'styles/mixins';
 
 $slack-work-space-name-card-background: #fff5ff;
 $slack-work-space-name-card-border: #efc1f6;

apps/app/src/components/Layout/BasicLayout.module.scss

@@ -1,5 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/mixins';
+@use 'styles/mixins';
 
 
 // for react-toastify

apps/app/src/components/Layout/SearchResultLayout.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .on-search :global {

apps/app/src/components/PageView/PageViewLayout.module.scss

@@ -1,6 +1,6 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/mixins';
-@use '~/styles/variables' as var;
+@use 'styles/mixins';
+@use 'styles/variables' as var;
 
 
 $subnavigation-height: 50px;

apps/app/src/components/ReactMarkdownComponents/CodeBlock.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .code-highlighted-title {

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/SelectablePageList.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
  .selectable-page-list :global {

apps/app/src/features/openai/client/components/AiAssistant/OpenDefaultAiAssistantButton.module.scss

@@ -1,7 +1,7 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/core-styles/scss/variables/growi-official-colors';
 @use '@growi/ui/scss/atoms/btn-muted';
-@use '~/client/components/PageControls/button-styles';
+@use 'client/components/PageControls/button-styles';
 
 .btn-open-default-ai-assistant :global {
   @extend %btn-basis;

apps/app/src/features/search/client/components/SearchMenuItem.module.scss

@@ -1,5 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 
 .search-menu-item :global {
   li {

apps/app/src/features/search/client/components/SearchPage/SearchResultContent.module.scss

@@ -1,4 +1,4 @@
-@use '~/styles/mixins';
+@use 'styles/mixins';
 
 /* stylelint-disable-next-line block-no-empty */
 .search-result-content :global {

apps/app/src/styles/atoms/_code.scss

@@ -1,4 +1,4 @@
-@use '~/styles/variables' as var;
+@use 'styles/variables' as var;
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 /*

apps/app/src/styles/molecules/toastr.scss

@@ -1 +1 @@
-@import '~react-toastify/scss/main';
+@import 'react-toastify/scss/main';