Laravel에서 SASS로 TailwindCSS 설정하기

시작

시작하기 전에 Composer 및 npm이 설치되어 있는지 확인하십시오.

먼저 create a Laravel project .

종속성 설치

다음으로 다음 명령을 실행하여 Laravel의 npm 종속성을 설치합니다.

npm install
npm install tailwindcss

Sass는 Laravel과 함께 제공되므로 수동으로 설치할 필요가 없습니다.

tailwind.config.js

다음을 실행하여 tailwind.config.js 파일을 생성할 수 있습니다.

npx tailwindcss init

루트 폴더에 있습니다.

webpack.mix.js

내부webpack.mix.js, 필요tailwindcss:

const tailwindcss = require('tailwindcss');

다음과 같이 읽도록 코드를 업데이트하십시오.

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })

여기서 app.scss는 기본 SCSS 파일의 이름입니다.

가지고 있는 각 추가 SCSS 파일에 대해 다른 코드 스니펫을 추가합니다. 예시:

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })
    .sass('resources/sass/app2.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })

변경사항 미리보기

SCSS 파일을 변경하는 즉시 변경 사항을 미리 보려면 편집할 때 npm run watch를 실행하십시오. webpack.config.js에 나열된 SCSS 파일이 업데이트될 때마다 파일이 다시 빌드됩니다. 먼저 브라우저에서 캐싱을 비활성화해야 합니다. 그렇지 않으면 새로 빌드된 파일이 로드되지 않고 브라우저에서 이전 파일을 계속 사용합니다.


그게 다야! 이제 모든 설정이 완료되었습니다. 😄