Next.js | 기본기능 | Built-In CSS Support(SCSS)

리액트에서의 스타일 적용법은 다음 링크로 확인할 수 있다.

 

https://typo.tistory.com/entry/Reactjs-%EC%9E%85%EB%AC%B8-CSS-SASS-SCSS?category=891266 

React.js | 입문 | CSS, SASS, SCSS

 

 

NextJS CSS는 다음 링크로 자세히 볼 수 있다.

 

https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet

Basic Features: Built-in CSS Support | Next.js

---

 

Global CSS

bootstrap 같은 전역 css는 pages/_app.js 에 추가해서 사용할 수 있다.

pages/_app.js

// pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

 

 

Component CSS

특정 Component에서 쓰이는 css는 컴포넌트와 이름이 같은 css 파일을 만들어서 import 할 수 있다.

 

예를들어 Components/Button 폴더 안에 index.js, Button.module.css 파일이 있다고 가정할 때 아래와 같이 사용할 수 있다.

 

Components/Button/Button.module.css

/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
  color: white;
  background-color: red;
}

 

Components/Button/index.js

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

 

css 파일은 어느 곳에서나 가져올 수 있습니다.

 

SASS in NextJS

SASS를 이용해 scss 파일을 사용하고자 할 때는 먼저 사용할 모듈을 설치하자.

$ npm install sass

 

그다음 next.config.js 파일을 수정해야 한다.

next.config.js

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

 

 

React에서와 같이 변수를 사용할 수도 있으며 export로 변수를 밖으로 내보낼 수도 있다.

variables.module.scss

/* variables.module.scss */
$primary-color: #64FF00

:export {
  primaryColor: $primary-color
}

 

pages/_app.js

// pages/_app.js
import variables from '../styles/variables.module.css'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}

 

 

참조

https://medium.com/sebride/next-js-with-module-sass-a8fe3976147

Next.js with module sass