CSS 스타일 구성

1. CSS 스타일 패키지 설치

style-loader, css-loader, mini-css-extract-plugin 패키지를 프로젝트에 설치합니다.

패키지 설치

npm i style-loader css-loader mini-css-extract-plugin -D

2. 로더 / 플러그인 구성

module에 CSS 스타일 로더(loader)를 구성합니다. 그리고 plugins 구성을 추가한 후 플러그인을 설정합니다.

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// ...
  
module.exports = (_env, argv) => {
  // ...
  return {
    // ...
    module: {
      rules: [
        // ...
        {
          test: /\.css$/i,
          use: [
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader',
          ],
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: 'assets/css/[name].[contenthash:8].css',
        chunkFilename: 'assets/css/[name].[contenthash:8].chunk.css',
      }),
    ],
  }
}

3. CSS 모듈 구성 (옵션)

CSS 모듈은 css-loader 옵션 modules 값을 true 로 설정하면 사용 가능합니다. CSS 모듈(*.module.css) 파일에 적용하기 위한 새로운 규칙을 추가합니다.

webpack.config.js

// ...
  
module.exports = (_env, argv) => {
  // ...
  return {
    // ...
    module: {
      rules: [
        // style-loader, css-loader 구성
        {
          test: /\.css$/i,
          exclude: /\.module\.css$/i, // 모듈 파일 제외 설정
          use: ['style-loader', 'css-loader'],
        },
        // CSS Module ([filename].module.css)
        {
          test: /\.module\.css$/i,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
              },
            },
          ],
        },  
      ],
    },
    // ...
  }
}

4. PostCSS 모듈 구성 (옵션)

postcss-loader, postcss-preset-env, postcss-import 패키지를 프로젝트에 설치합니다.

패키지 설치

npm i postcss-loader postcss-preset-env postcss-import -D

CSS, CSS 모듈 로더에 PostCSS 구성을 업데이트 합니다. 프로젝트 루트 위치에 PostCSS 구성 파일을 만들고 플러그인 구성을 추가합니다.

webpack.config.js

// ...
  
module.exports = (_env, argv) => {
  // ...
  return {
    // ...
    module: {
      rules: [
        // CSS
        {
          test: /\.css$/i,
          use: [
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader',
          ],
        },
        // CSS 모듈
        {
          test: /\.module.css$/i,
          use: [
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                // 0 => 불러올 로더 없음 (기본 값)
                // 1 => postcss-loader
                importLoaders: 1,
              },
            },
            'postcss-loader',
          ],
        },
      ],
    },
    // ...
  }
}

postcss.config.js

module.exports = {
  plugins: [
    "postcss-import",
    [
      'postcss-preset-env',
      {
        browsers: '> 5% in KR, defaults, not IE < 11',
        // CSS Grid 활성화 [false, 'autoplace', 'no-autoplace']
        autoprefixer: { grid: 'autoplace' },
      },
    ],
  ]
};

PostCSS 플러그인 디렉토리에서 유용한 플러그인을 찾아 프로젝트에 추가할 수 있습니다.

5. Sass 모듈 구성 (옵션)

sass-loader, sass, resolve-url-loader 패키지를 프로젝트에 설치합니다.

패키지 설치

npm i sass-loader sass resolve-url-loader -D

Sass 모듈 규칙을 module 구성에 추가합니다.

webpack.config.js

// ...
  
module.exports = (_env, argv) => {
  // ...
  return {
    // ...
    module: {
      rules: [
        // Sass
        {
          test: /\.s[ac]ss$/,
          use: [
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                // 2 => postcss-loader, sass-loader
                importLoaders: 2,
              },
            },
            'resolve-url-loader',
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        },        
      ],
    },
    // ...
  }
}