Laravel 10 + Vite łączący się z Sass Tailwind

W artykule przedstawiono prosty sposób, w jaki za pomocą poleceń PowerShell można łatwo połączyć arkusz stylów CSS Tailwind dla frameworku Laravel 9, 10.

Ostrzeżenie! Ta lista zespołów jest aktualna na luty 2024 r. W chwili pisania tego artykułu w użyciu są następujące wersje:

• witaj 5.1.3
• Struktura Laravela 10.45.1
• węzeł-v20.9.0

Laravel od wersji 9 korzysta z kreatora Vite, który z kolei zapewnia wbudowaną obsługę preprocesorów

• .scss
• .sass
• .mniej
• .styl
• .rysik

Poniżej opisano prostą sekwencję działań.

1. Za pomocą wiersza poleceń instalujemy preprocesor, w tym przykładzie wybieramy „sass”, chociaż w razie potrzeby dostępne są również „mniej” i „rysik”. Zespół można znaleźć na oficjalnej stronie internetowej https://vitejs.dev/guide/features.html#css-pre-processors
2. Utwórz nowy folder, a w nim plik 'resources/scss/app.scss' - należy dodać nową linię do pliku vite.config.js
3. Napisanie polecenia instalacyjnego
4. Na stronie powitalnej możesz usunąć całą zawartość tagów treści strony, a także linię stylu treść, styl Dalej w tagach głowa musisz wprowadzić parametry połączenia
5. Teraz w treści pliku powitalnego możemy wpisać treść i ustawić klasy bloków. Opisy klas są zapisywane w pliku 'resources/scss/app.scss' Aby jednak style mogły zostać wyświetlone na stronie należy podać polecenie uruchomienia
6. Na innej karcie wiersza poleceń uruchom serwer frameworka i kliknij łącze
7. Na oficjalnej stronie tailwindcss.com/docs/guides/laravel Znajdujemy polecenia do instalacji biblioteki stylów. Ale przed ich pobraniem musisz wstrzymać serwer. Proszę zwrócić uwagę na to w pliku pakiet.json zostały utworzone nowe zależności o podanych nazwach
8. Utwórz nowy plik postcss.config.js
9. W naszym projekcie pojawiły się dwa pliki konfiguracyjne. Na tej samej stronie oficjalnej strony internetowej znajdujemy kod, który należy dodać do pliku tailwind.config.js
10. Należy dokonać zmian w pliku zasoby\css\app.css. Na tej samej stronie oficjalnej strony internetowej znajdujemy listę, którą dodajemy pod wskazany adres. Należy pamiętać, że ten wpis można pozostawić na górze pliku zasoby\scss\app.scss
11. Po wprowadzeniu zmian uruchom ponownie kompilator vite

export default defineConfig({
     plugins: [ 
          laravel({ 
               input: [
                   'resources/css/app.css',
                   'resources/js/app.js',
                   'resources/scss/app.scss'
                   ], 
     refresh: true,
          }),
     ],
}); 

Ctrl + C

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ], //add this lines
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;