10. 모듈 번들링과 로더 활용 - 2

CSS, SASS, LESS 로더 활용

웹 개발에서 스타일링은 중요한 부분 중 하나입니다. Webpack은 다양한 로더를 통해 CSS, SASS, LESS와 같은 스타일 시트를 모듈화하고 번들링하는 기능을 제공합니다.

1. CSS 로더

Webpack은 기본적으로 CSS 파일을 모듈로 간주하여 로딩할 수 있습니다. style-loader와 css-loader를 조합하여 사용합니다.

1.1 설치

npm install style-loader css-loader --save-dev

1.2 Webpack 구성

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

1.3 사용

// JavaScript 파일에서 CSS 불러오기
import './styles.css';

2. SASS 로더

SASS는 CSS 전처리기로, 더 풍부한 기능을 제공합니다. Webpack에서는 sass-loader와 함께 style-loader, css-loader도 함께 사용합니다.

2.1 설치

npm install sass-loader sass --save-dev

2.2 Webpack 구성

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

2.3 사용

// JavaScript 파일에서 SASS 불러오기
import './styles.scss';

3. LESS 로더

LESS는 또 다른 CSS 전처리기로, SASS와 유사하지만 문법이 약간 다릅니다. Webpack에서는 less-loader와 함께 style-loader, css-loader도 함께 사용합니다.

3.1 설치

npm install less-loader less --save-dev

3.2 Webpack 구성

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
    ],
  },
};

3.3 사용

// JavaScript 파일에서 LESS 불러오기
import './styles.less';

4. 로더 옵션

로더에는 각종 옵션을 설정할 수 있습니다. 예를 들어, CSS의 모듈화를 사용하려면 css-loader에 modules 옵션을 추가합니다.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
};

 

이렇게 설정하면 CSS 클래스가 모듈로 캡슐화되어 전역 스코프에서 격리됩니다. CSS, SASS, LESS 로더에서도 유용한 다양한 옵션을 활용할 수 있습니다.

CSS, SASS, LESS 로더를 통해 Webpack은 강력한 스타일링 솔루션을 제공하며, 프로젝트의 스타일을 효율적으로 관리할 수 있습니다.