Next Dev Gil

Install package에 node-sass 와 sass-loader를 설치 npm install --save-dev node-sass sass-loader Usage main.js에 scss import - import "./assets/scss/common.scss"; //scss import import { createApp } from 'vue' import App from './App.vue' import mitt from 'mitt' let emitter = mitt(); let app = createApp(App) app.config.globalProperties.emitter = emitter; import store from './store.js' import './registerSe..

npm install -D sass Next js는 sass, scss 역시 내재된 방식(CSSModule)으로 지원하기에 패키지 하나 받으면 이후에는 [name].module.scss 형식을 사용할 수 있다. CSSModule 방식은 같은 클래스명이라도 특정 컴포넌트에만 영향을 주는 방법이다. 파일명, 클래스명, 해시값을 이용해 고유한 클래스명을 자동으로 만들어내기 때문에 다른 파일에 존재하는 클래스명과 충돌을 걱정할 필요가 없음. 빌드 타임에 이러한 CSS 모듈 파일들은 자동으로 여러 개의 축약된 CSS 파일들로 번들링 된다. 여러 개인 이유는 Next.js(정확히는 Webpack)의 코드 분할에 의해 각 페이지에서 필요한 CSS 파일들이 분리되기 때문이다. 타입스크립트 style 자동완성 플러그인 ..