change css to scss, add textdomain support

app/setup.php

@@ -17,7 +17,7 @@
  */
 add_filter('wp_head', function () {
     echo Str::wrap(app('assets.vite')([
-        'resources/css/app.css',
+        'resources/styles/app.scss',
         'resources/js/app.js',
     ]), "\n");
 });
@@ -43,7 +43,7 @@
     }
 
     echo Str::wrap(app('assets.vite')([
-        'resources/css/editor.css',
+        'resources/styles/editor.scss',
         'resources/js/editor.js',
     ]), "\n");
 });
@@ -134,6 +134,11 @@
      * @link https://developer.wordpress.org/reference/functions/add_theme_support/#customize-selective-refresh-widgets
      */
     add_theme_support('customize-selective-refresh-widgets');
+
+    /**
+     * Set textdomain.
+     */
+    load_theme_textdomain('sage', get_template_directory() . '/languages');
 }, 20);
 
 /**

vite.config.js

@@ -1,34 +1,39 @@
-import { defineConfig } from 'vite'
-import laravel from 'laravel-vite-plugin'
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
 import {
   wordpressPlugin,
   wordpressRollupPlugin,
   wordpressThemeJson,
-} from './resources/js/build/wordpress'
-import tailwindConfig from './tailwind.config.js'
+} from './resources/js/build/wordpress';
+import tailwindConfig from './tailwind.config.js';
 
 export default defineConfig({
   plugins: [
     laravel({
       input: [
-        'resources/css/app.css',
         'resources/js/app.js',
-        'resources/css/editor.css',
         'resources/js/editor.js',
+        'resources/styles/app.scss',
+        'resources/styles/editor.scss',
       ],
       refresh: true,
     }),
 
     wordpressPlugin(),
     wordpressRollupPlugin(),
 
-    // Generate the theme.json file in the public/build/assets directory
-    // based on the Tailwind config and the theme.json file from base theme folder
     wordpressThemeJson({
       tailwindConfig,
       disableTailwindColors: false,
       disableTailwindFonts: false,
       disableTailwindFontSizes: false,
     }),
   ],
-})
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "settings/_variables.scss";`,
+      },
+    },
+  },
+});