[Laravel7.x] Tailwindcss를 설치하고 아이콘에 FontAwesome 사용
10735 단어 Laravel7라라벨tailwindcssFontAwesome
이번 주제
최신 tailwindcss 문서에는 Laravel에 설치하는 방법이 있습니다.
h tps : // 싶다 ㄱ ぃん dcs ㎃. 코 m / 드 cs / 구이데 s / ぁらゔぇl
다만, 보는 한 이 문서가 상정하고 있는 버젼은 Laravel8과 같기 때문에, 그 이전의 버젼이라고 문서대로에 해도 잘 되지 않습니다. (webpack.mix.js의 설명이 다르기 때문에).
그래서 이전 버전의 Laravel이라면 조금 쓰는 방법을 바꿔야합니다.
여기에서는 제가 주로 사용하고 있는 laravel7계에 인스톨 해 보겠습니다.
절차
tailwindcss 설치
설치.
npm install tailwindcss
resources/sass/app.scss 변경:
resources/sass/app.scss@tailwind base;
@tailwind components;
@tailwind utilities;
그런 다음 Tailwind config file을 만듭니다.
필수는 아니지만 사용자 정의하거나 Purge 옵션을 사용하여 빌드 크기를 줄일 수 있으므로 작성하는 것이 좋습니다.
npx tailwindcss init
그러면 프로젝트 디렉토리에 tailwind.config.js 가 되어 있으므로 다음과 같이 편집합니다.
※vue 파일은 필요에 따라서 재기록해 주세요.
ctailwind.config.jsmodule.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
그런 다음 webpack.mix.js를 다시 씁니다.
이 설정은 tailwindcss v1.9.0 문서에 있습니다.
최신 v2.0.3의 문서는 Laravel8 방향이므로 주의.
webpack.mix.jsconst mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
컴파일.
watch에서도 hot에서도 좋아하는 것처럼.
npm run dev
그렇다면 tailwindcss를 사용할 수 있는지 확인.
간단한 카드를 만들었으므로 표시해 보겠습니다.
resource/view/welcome.blade.php<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div class="container mx-auto flex justify-center my-10">
<div class="border-2 border-gray-300 p-6 shadow-md rounded-lg">
<div>
<p class="text-lg text-gray-600">Hello Tailwindcss</p>
</div>
</div>
</div>
</body>
</html>
내장 서버를 시작하고,
php artisan serve
이미지처럼 되어 있으면 OK.
fontawesome 설치
무료 버전을 사용합니다.
프리라고는 해도 1,609 종류의 아이콘이 갖추어져 있어 한층 더 상용 이용도 가능한 굉장한 아이입니다.
설치.
npm install --save @fortawesome/fontawesome-free
resources/sass/app.scss에 다음을 추가합니다.
resources/sass/app.scss@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';
webpack.mix.js 에 1행 추기.
webpack.mix.jsconst mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts') // 追記
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
컴파일.
npm run dev
이상! ! !
Reference
이 문제에 관하여([Laravel7.x] Tailwindcss를 설치하고 아이콘에 FontAwesome 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/gentuki/items/6408a0881f9b812510ac
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
tailwindcss 설치
설치.
npm install tailwindcss
resources/sass/app.scss 변경:resources/sass/app.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
그런 다음 Tailwind config file을 만듭니다.
필수는 아니지만 사용자 정의하거나 Purge 옵션을 사용하여 빌드 크기를 줄일 수 있으므로 작성하는 것이 좋습니다.
npx tailwindcss init
그러면 프로젝트 디렉토리에
tailwind.config.js 가 되어 있으므로 다음과 같이 편집합니다.※vue 파일은 필요에 따라서 재기록해 주세요.
ctailwind.config.js
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
그런 다음
webpack.mix.js를 다시 씁니다.이 설정은 tailwindcss v1.9.0 문서에 있습니다.
최신 v2.0.3의 문서는 Laravel8 방향이므로 주의.
webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
컴파일.
watch에서도 hot에서도 좋아하는 것처럼.
npm run dev
그렇다면 tailwindcss를 사용할 수 있는지 확인.
간단한 카드를 만들었으므로 표시해 보겠습니다.
resource/view/welcome.blade.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div class="container mx-auto flex justify-center my-10">
<div class="border-2 border-gray-300 p-6 shadow-md rounded-lg">
<div>
<p class="text-lg text-gray-600">Hello Tailwindcss</p>
</div>
</div>
</div>
</body>
</html>
내장 서버를 시작하고,
php artisan serve
이미지처럼 되어 있으면 OK.
fontawesome 설치
무료 버전을 사용합니다.
프리라고는 해도 1,609 종류의 아이콘이 갖추어져 있어 한층 더 상용 이용도 가능한 굉장한 아이입니다.
설치.
npm install --save @fortawesome/fontawesome-free
resources/sass/app.scss에 다음을 추가합니다.resources/sass/app.scss
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';
webpack.mix.js 에 1행 추기.webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts') // 追記
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
컴파일.
npm run dev
이상! ! !
Reference
이 문제에 관하여([Laravel7.x] Tailwindcss를 설치하고 아이콘에 FontAwesome 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/gentuki/items/6408a0881f9b812510ac텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
