> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/webpack/react/create-your-own-react-app/configure-css.md).

# CSS 스타일 구성

## 1. CSS 스타일 패키지 설치

[style-loader](https://www.npmjs.com/package/style-loader), [css-loader](https://www.npmjs.com/package/css-loader), [mini-css-extract-plugin](https://www.npmjs.com/package/mini-css-extract-plugin) 패키지를 프로젝트에 설치합니다.

{% tabs %}
{% tab title="패키지 설치" %}

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

{% endtab %}
{% endtabs %}

## 2. 로더 / 플러그인 구성

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

{% tabs %}
{% tab title="webpack.config.js" %}

```javascript
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',
      }),
    ],
  }
}
```

{% endtab %}
{% endtabs %}

## 3. CSS 모듈 구성 (옵션)

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

{% tabs %}
{% tab title="webpack.config.js" %}

```javascript
// ...
  
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,
              },
            },
          ],
        },  
      ],
    },
    // ...
  }
}
```

{% endtab %}
{% endtabs %}

## 4. PostCSS 모듈 구성 (옵션)

[postcss-loader](https://www.npmjs.com/package/postcss-loader), [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env), [postcss-import](https://www.npmjs.com/package/postcss-import) 패키지를 프로젝트에 설치합니다.

{% tabs %}
{% tab title="패키지 설치" %}

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

{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="webpack.config.js" %}

```javascript
// ...
  
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',
          ],
        },
      ],
    },
    // ...
  }
}
```

{% endtab %}

{% tab title="postcss.config.js" %}

```java
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' },
      },
    ],
  ]
};
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
[PostCSS 플러그인 디렉토리](https://github.com/postcss/postcss/blob/main/docs/plugins.md)에서 유용한 플러그인을 찾아 프로젝트에 추가할 수 있습니다.
{% endhint %}

## 5. Sass 모듈 구성 (옵션)

[sass-loader](https://www.npmjs.com/package/sass-loader), [sass](https://www.npmjs.com/package/sass), [resolve-url-loader](https://www.npmjs.com/package/resolve-url-loader) 패키지를 프로젝트에 설치합니다.

{% tabs %}
{% tab title="패키지 설치" %}

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

{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="webpack.config.js" %}

```javascript
// ...
  
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,
              },
            },
          ],
        },        
      ],
    },
    // ...
  }
}
```

{% endtab %}
{% endtabs %}