날기 위해서는 순풍이 필요하다
TailwindCSS를 사용해야 하는 이유
이전 프로젝트 중 하나에서 TailwindCSS과 사랑에 빠졌습니다. 누군가에게는 매우 논란이 많은 프레임워크라는 것을 알고 있지만, 개인적으로 11년차 백엔드 개발자로서 프론트엔드에 스타일을 추가하는 것이 즐거웠던 것은 처음이었습니다. .
vue-ts 템플릿 Hugo의 자산 관리
Hugo는 다양한 방법을 지원하므로 블로그에 CSS 라이브러리를 추가하는 방법은 거의 없습니다. 웹팩, Vite 등과 같은 다른 빌드 도구와 더 잘 통합하기 위해 TailwindCSS를 사용했다면 기본적으로 asset management을 지원합니다. 운 좋게도 휴고PostCSS . TailwindCSS를 PostCSS 플러그인으로 설치한 다음 Hugo의
PostCSS 파이프를 사용하여 블로그에 통합할 것입니다. 이 계획을 염두에 두고 시작하겠습니다.그것도 지지한다 TailwindCSS 설치
blog/ 폴더에서
을 따라 시작합니다.TailwindCSS 및 PostCSS 설치
$ npm install --save-dev tailwindcss postcss autoprefixer
.gitignore 파일 추가 구성 파일을 만듭니다.
$ npx tailwindcss init --postcss
--postcss 파일을 초기화하는 옵션도 추가되었습니다postcss.config.js.템플릿 경로를 구성합니다.
content 폴더에 있는 유일한 blog/src/layouts 파일입니다.diff --git a/blog/tailwind.config.js b/blog/tailwind.config.js
index 32e3abd..7b5a700 100644
--- a/blog/tailwind.config.js
+++ b/blog/tailwind.config.js
@@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: [],
+ content: ["./src/layouts/**/*.html"],
theme: {
extend: {},
},
CSS에 Tailwind 지시문 추가
$ mkdir -p blog/src/assets
$ touch !$/main.css
그런 다음 새로 생성된 업데이트
blog/src/assets/main.cssdiff --git a/blog/src/assets/css/main.css b/blog/src/assets/css/main.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/blog/src/assets/css/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
또한
.editorconfig 파일 형식을 지원하도록 .pre-commit-config.yaml , .prettierrc.yaml 및 css를 업데이트할 예정입니다.Node.js 프로젝트 PostCSS를 사용하도록 Hugo 구성
이제 TailwindCSS를 설치했으므로
PostCSS 파이프를 통해 블로그를 사용하도록 구성할 준비가 되었습니다.문서에서
Hugo Pipe’s PostCSS requires the postcss-cli JavaScript package to be installed in the environment (npm install -g postcss postcss-cli) along with any PostCSS plugin(s) used (e.g., npm install -g autoprefixer).
설치
$ npm install --save-dev postcss-cli
처리된 CSS와 함께
postcss-cli 태그를 link에 추가diff --git a/blog/src/layouts/partials/head.html b/blog/src/layouts/partials/head.html
index b9f74a6..556a0cf 100644
--- a/blog/src/layouts/partials/head.html
+++ b/blog/src/layouts/partials/head.html
@@ -3,4 +3,6 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ .Site.Title }}</title>
+ {{ $css := resources.Get "css/main.css" | resources.PostCSS }}
+ <link rel="stylesheet" href="{{ $css.RelPermalink }}" />
NPM 환경에서 hugo를 실행하려면
blog/src/layouts/partials/head.html에 scripts 명령을 추가하십시오. 기본적으로 Hugo는 package.json 을 검색합니다.From Hugo 0.78.1 the start directory for resolving NPM packages (aka. packages that live inside a node_modules folder) is always the main project folder.
하지만 프로젝트 구조 때문에 npm 명령으로 hugo를 실행해야 합니다. npm에는 약어가 있으므로 명령 이름으로
node_modules/ 을 사용합니다.diff --git a/blog/package.json b/blog/package.json
index 3f40e6d..5b5d864 100644
--- a/blog/package.json
+++ b/blog/package.json
@@ -1,4 +1,7 @@
{
+ "scripts": {
+ "start": "hugo --source src server --baseURL http://localhost/"
+ },
"devDependencies": {
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
이제 TailwindCSS를 사용하는 블로그가 생겼습니다.
시작 연결
Hugo의 자산 관리
https://gohugo.io/hugo-pipes/postcss/ TailwindCSS 설치
https://github.com/github/gitignore/blob/main/Node.gitignore PostCSS를 사용하도록 Hugo 구성
Reference
이 문제에 관하여(날기 위해서는 순풍이 필요하다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/imomaliev/to-fly-you-need-a-tailwind-a9l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
