"devDependencies": {
"@inertiajs/vue3": "^1.0.0",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.2",
"@vitejs/plugin-vue": "^4.0.0",
"autoprefixer": "^10.4.7",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.5",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.0",
"vite": "^4.0.0",
"vue": "^3.2.31"
}
Postcss yüklü geliyor zaten
Şöyle bire scss dosya içeriğim var
/* Sidebar Wrapper Area */
.sidebar-wrapper {
@apply fixed top-0 z-[999] h-screen w-[248px] bg-white shadow-base dark:bg-slate-800;
}
.app-wrapper .sidebar-open {
@apply block;
}
.app-wrapper .menu-hide {
@apply hidden;
}
.. şeklinde uzayıp devam ediyor
uzantıyı değiştirip sidebar.css yaparak app.css içinde
@import "../js/Layouts/plugins/sidebar.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
bu şekilde kayderek kullanıyorum bir problem yok ama npm run dev dediğimde
böyle bir hata veiryor kısa bir araştırmayla
Sass’ın temel yazım kurallarından biriside iç içe (nested) kullanımdır. CSS ile kod yazarken girintiler çok önemli değildir. Biz daha iyi bir düzen için girintileme yapıyorduk ama bu girintiler CSS için bir şey ifade etmiyordu. Sass’ta ise girintilerin bir anlamı ve işlevi var.
https://fatihhayrioglu.com/sass-ta-ic-ice-nested-kullanim/
sorun tespiti galiba doğruda çözüm için bişe bulamadım "postcss": "8.4.14", i kaldırıp sass mı kurmalıyım
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
bu linki çözemedim bişiler denedim beceremedimde ..
tamam npm install -D postcss-nesting bunu yüükliycemde yükledikten sonra şu aşşağıı düzenlerken bi hata yapıyrum heralde
npm install -D postcss-nesting bunu aşşağıya nasıl ekliycem ?
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [forms, typography],
};