Sass module

Tip

Sass Module은 Component에서 불러올 때 객체로 불러온다.

/* Container.module.scss */

.center {
  margin: {
    left: auto;
    right: auto;
  }
}

.left {
  margin-right: auto;
}
.right {
  margin-left: auto;
}

위의 Scss Module을 Component 파일에서 console로 확인해보자.

import React from 'react'
import containerStyle from './Container.module.scss'

const Container = ({ children, ...restProps }) => {
    // console.log 확인 
    console.log(containerStyle)
  return <div {...restProps}>{children}</div>
}

export default Container

console에 Scss 코드가 객체로 불러와진 것을 확인 할 수 있다.

자 이렇게 되면 어떻게 활용을 할 수 있느냐? containerStyle[align] 구문, 향상된 객체 표기법을 사용할 수 있다.

import React from 'react' 
import classNames from 'classnames' 
import containerStyle from './Container.module.scss' 

/* -------------------------------------------------------------------------- */

const Container = ({
// props로 스타일을 설정한 class 이름을 전달 받는다. 
  align = 'center',
  className = '',
  children,
  ...restProps
}) => {

  return (
    <div
      // containerStyle[align] 동적으로 객체의 아이템을 설정할 수 있다. 
      className={classNames(containerStyle[align], className)}
      {...restProps}
    >
      {children}
    </div>
  )
}

export default Container