돈들어손내놔

뷰나 리액트 등 이용한 개발시 Vite를 사용하는 경우가 많이 있습니다. 이 경우 프로젝트를 빌드할 때, index.html 등 html파일의 빌드 결과물이 minify되도록 하는 방법을 알아보겠습니다. vite-plugin-html 플러그인을 설치합니다.npm 설치 npm i vite-plugin-html -Dyarn 설치 yarn add vite-plugin-html -D vite.config.js (타입스크립트 사용시 vite.config.ts)를 열어줍니다. 아래와 같이 vite-plugin-html을 import해 주고, 필요한 옵션을 plugins 내에 추가해 줍니다.import { fileURLToPath, URL } from 'node:url'; import { defineC..

본 포스팅은 Visual Studio Code IDE 환경을 기준으로 작성되었습니다. npm 을 통해 Vue프로젝트를 생성해 줍니다. npm init vue@latest Tailwind CSS를 설치해 줍니다. npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 아래 명령어를 통해 tailwind.config.js 파일과 postcss.config.js 파일을 생성합니다. npx tailwindcss init -p tailwind.config.js 를 아래와 같이 최적화해 줍니다. /** @type {import('tailwindcss').Config} */ export default { purge: ['./in..

Vue3 + Vite 환경에서 SCSS를 전역적으로 불러와 사용하기 위해서는 아래와 같이 설정하시면 됩니다. vite.config.js을 열어줍니다. import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }..