[ Vite ] 반응형 프로젝트 세팅 & scss연결

vue할때와 똑같이 작업하는 PC에 무선IP를 동시에 구동시켜, CMD통해서 경로를 찾아서 디바이스에서 보여지는줄 알았는데, Vite는 더 편하게 되어있다.

yarn dev --host

--host 를 붙일경우 네트워크 IP도 같이 생성해서 보여주어 디바이스상으로 반응형 작업에 편하다.

다른 라이브러리도 편하지만, React 같은경우 재사용 컴포넌트를 위해 styled-components를 사용하는 편이긴한데, 
scss 의 매력이 너무 좋아서... scss 연결하는것을 찾아봤다. ( 역시... 쉽다.. )

npm install -D sass

 

---

 

Vite에 scss 사용하기 편하게 전역으로 설정하기. 

vite --config my-config.js​

---

scss & 절대경로 전역설정 완료 로직

 

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from "path";

//__dirname 선언
const __dirname = path.resolve();

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@", replacement: path.resolve(__dirname, "./src") },
      {
        find: "@components",
        replacement: path.resolve(__dirname, "./src/Components"),
      },
    ],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
          @import '@/assets/scss/_index.scss';
        `,
        },
      },
    },
  },
})