CSS 모듈

css를 모듈화하여 사용하는 방식으로 css 클래스를 만들면 자동으로 고유한 클래스네임을 생성하여 스코프를 지역적으로 제한한다.

css 모듈 활성화

• modules: true → css 모듈 활성화
• localIdentName → css 모듈에서 고유하게 생성되는 클래스네임 형식

//config/webpack.config.js
{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    modules: true,
    localIdentName: '[path][name]__[local]--[hasg:base64:5]'
  }),
  sideEffects: true,
}

css 모듈 사용

//App.scss
.box {
  display: inline-block;
  width: $size;
  height: $size;
  border: 1px solid black;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

classnames

• 설치: npm install classnames -save
• 여러가지 형식으로 클래스를 지정할 수 있음
• Angular의 ngClass 디렉티브와 유사

//App.js
import React, { Component } from 'react';
import styles from './App.scss';
import classNames from 'classnames/bind';
const cx = classNames.bind(styles);

class App extends Component {
  render() {
    const isBlue = true;
    return (
      <div className={cx('box', { blue: isBlue })}>
        <div className={cx('box-inside')}></div>
      </div>
    )
  }
}

export default App;

Sass

• Syntactically awesome style sheets

프로젝트에 적용하기

• 설치: node-sass, sass-loader

//config/webpack.config.js
{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      localIdentName: '[path][name]__[local]--[hash:base64:5]'
    },
    'sass-loader'
  ),
  sideEffects: true,
},

변수, 믹스인을 전역적으로 사용

전역에서 사용하도록 경로 설정