[ Next / SCSS ] 시행착오 (feat. Next.config)

Next로 refactor을 하면서 겪는 시행착오, 그중 scss를 react 시절에 쓰던 것 처럼 쓸 수 있다는 착각.

각각을 individual 하게 폴더를 만들어서 제작. 그런데!

인식을 못함 => 세팅이 필요 하다는 것을 인식

 

좋은 글들이 있었는데, 상세 설정이 아쉬워서 직접 정리한 글입니다.

 

Next.config.mjs

필요 이유는 환경설정을 해서  scsc의 파일 정보를  정확하게 읽어보게 하는 방법.

처음 path를 봤을 때, 왜 require가 있지라는 생각을 했다. require는 node 용어인데?ㅎㅎnode를 쬐금 공부한게 도움이 됨

 

const path = require('path'); // node를 통해서 서버에서 파일 읽기

const nextConfig = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')], // 1. path를 통해서 2. join을 시키는데 그 내용은 ( ) 3. __dirname ==> scss 파일 명칭, 4. 'sytles' 이라는 폴더에서
  },
};

module.exports = nextConfig;

아래처럼 위치 시키길

 

 

 

위는 방식으론 이제 안됨(2024.07)

In ES module scope, you should use import statements instead of require. Since Next.js supports ES modules, you can convert your configuration to use import statements.

ES moduel은 require를 지원하지 않음. 따라서, import를 써야 함. 두번째, join() method의 __dirname을 process.cwd()로 대체

 

 

 

그러면 sytles 폴더의 위치는?

sytles 파일은 componets와 동일한 위치(형제), apps 파일 바로 아래.

project-root/
├── pages/
│   ├── index.js
│   └── _app.js
├── components/
│   └── SearchForm.js
├── styles/
│   └── globals.scss
│   └── SearchFor.module.scss
├── next.config.js
└── package.json

 

결과 완료

하단에 별도의 파일이 뜨는 것을 확인할 수 있다.

 

 

 

정리하면

1. styles라는 폴더가 필요

2. 이 폴더 안에서 Form.module.scss 로 작성

3. Header component에서 import styles from '../styles/Form.module.scss'로 해서 불러 올 수 있음.

 

 

참조

https://nextjs.org/docs/app/building-your-application/styling/sass

Styling: Sass | Next.js

 

https://velog.io/@ice-prince/Next.Js-%EC%97%90%EC%84%9C-Scss-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0