Remove Sass (#84)

* Use `component` directive

* Install `postcss-import`

* Use CSS files instead of Sass

* Remove `Sass`

Author: SebKay

bun.lockb

@@ -14,7 +14,7 @@
     "autoprefixer": "^10.4.20",
     "laravel-vite-plugin": "^1.0.5",
     "postcss": "^8.4.47",
-    "sass": "^1.79.1",
+    "postcss-import": "^16.1.0",
     "tailwindcss": "^3.4.12",
     "vite": "^5.4.6",
     "vue": "^3.5.6"

package.json

@@ -1,6 +1,7 @@
 module.exports = {
     plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
+        'postcss-import': {},
+        'tailwindcss': {},
+        'autoprefixer': {},
     }
 }

postcss.config.cjs

@@ -0,0 +1,11 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "@css/forms.css";
+@import "@css/buttons.css";
+@import "@css/content.css";
+
+#app {
+    @apply h-full;
+}

resources/css/app.css

@@ -7,7 +7,7 @@
 
     @routes
 
-    @vite(['resources/scss/app.scss', 'resources/js/app.js'])
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
 
     @inertiaHead
 </head>

resources/scss/_buttons.scss renamed to resources/css/buttons.css

@@ -6,7 +6,7 @@ export default defineConfig({
     plugins: [
         laravel({
             input: [
-                'resources/scss/app.scss',
+                'resources/css/app.css',
                 'resources/js/app.js',
             ],
             refresh: true,
@@ -29,15 +29,7 @@ export default defineConfig({
             '@fonts': '/public/fonts',
             '@img': '/public/img',
             '@js': '/resources/js',
-            '@scss': '/resources/scss',
-        },
-    },
-
-    css: {
-        preprocessorOptions: {
-            scss: {
-                api: 'modern',
-            },
+            '@css': '/resources/css',
         },
     },