프로젝트생성 > vite, react, typescript, tailwindcss, vscode, build시 css 특정위치, 파일로

Note > 자바스크립트 프레임워크/라이브러리모음프로젝트생성 > vite, react, typescript, tailwindcss, vscode, build시 css 특정위치, 파일로By a3040, Published on Invalid Date

1.생성되는 js 특정 위치에 놓기

vite -rollup설정 추가

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'


// https://vitejs.dev/config/
export default defineConfig({
  build:{
    rollupOptions:{
      input : "./src/main.tsx", 
      output:{
        dir:"../../back/src/main/resources/static/js/admin", /*출력 디렉토리*/
        entryFileNames:"dashboard.js", /*만들 js */
      }
    }, 
  },
  plugins: [react()],
})

2.tailwindcss를 통해 성성된 css파일 위치 및 파일명 고정

export default defineConfig({
  build:{
    rollupOptions:{
      input : "./src/main.tsx", 
      output:{
        assetFileNames: (chunkInfo) => {
          if (chunkInfo.name === 'main.css') /*임시로 만들어 지는 파일명*/
            return 'index.css' /* 새로 만들 원하는 고정 파일명 */
        },
        dir:"../../back/src/main/resources/static/js/admin", /*출력 디렉토리*/
        entryFileNames:"dashboard.js", /*만들 js */
        
      }
    }, 
  },
  plugins: [react()],
})

css설정 전 임의의 파일 생성

css설정 후 고정 파일 생성

3.고정파일에서 페이지 설정

board.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" /> 
    <title>admin-dashboard</title>
    <link rel="stylesheet" href="/js/admin/index.css">
  </head>
  <body>
    <div id="root"></div> 
    <script type="module" src="/js/admin/dashboard.js"></script>
  </body>
</html>

package.json

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build --watch",