PostCSS

예시

Tailwind CSS 예시 (opens in a new tab)

Default Behavior

Next.js는 내장 CSS 지원을 위해 PostCSS를 사용하여 CSS를 컴파일합니다.

별도의 설정 없이도 Next.js는 다음과 같은 변환을 통해 CSS를 컴파일합니다:

Autoprefixer (opens in a new tab)가 CSS 규칙에 자동으로 vender prefixes를 추가합니다 (IE11까지 지원).
다양한 브라우저에서 발생하는 Flexbox 버그 (opens in a new tab)가 명세서 (opens in a new tab)대로 동작하도록 수정되었습니다.
새로운 CSS 기능들이 Internet Explorer 11과 호환되도록 자동으로 컴파일됩니다:

기본적으로, CSS Grid (opens in a new tab) 및 Custom Properties (opens in a new tab)(CSS 변수)는 IE11 지원을 위해 컴파일되지 않습니다.

CSS Grid Layout (opens in a new tab)을 IE11에서 컴파일하려면, CSS 파일의 맨 위에 다음 주석을 추가할 수 있습니다:

/* autoprefixer grid: autoplace */

전체 프로젝트에서 CSS Grid Layout (opens in a new tab)의 IE11 지원을 활성화하려면, 아래 구성에서와 같이 autoprefixer를 설정할 수 있습니다(아래 접혀진 섹션 참조). 자세한 내용은 "Customizing Plugins"을 참조하세요.

CSS Grid Layout을 활성화하기 위한 설정을 보려면 클릭하세요.

postcss.config.json

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009",
          "grid": "autoplace"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

CSS 변수는 안전하게 컴파일할 수 없기 때문에 (opens in a new tab) 컴파일되지 않습니다. 변수를 사용해야 한다면 Sass (opens in a new tab)에 의해 컴파일되는 Sass 변수 (opens in a new tab)와 같은 것을 사용하는 것을 고려해보세요.

Customizing Target Browsers

Next.js는 Browserslist (opens in a new tab)를 통해 (Autoprefixer (opens in a new tab) 및 컴파일된 css 기능에 대한) 대상 브라우저를 설정할 수 있습니다.

browserslist를 사용자 정의하려면, package.json 파일에 다음과 같이 browserslist 키를 추가하세요:

package.json

{
  "browserslist": [">0.3%", "not dead", "not op_mini all"]
}

browsersl.ist (opens in a new tab) 도구를 사용하여 대상으로 하는 브라우저를 시각화할 수 있습니다.

CSS Modules

CSS Modules를 지원하기 위해 별도의 설정이 필요하지 않습니다. 파일에 .module.css 확장자를 사용하여 CSS Modules를 활성화할 수 있습니다.

Next.js의 CSS Module 지원에 대한 자세한 내용은 Next.js' CSS Module support를 참조하세요.

Customizing Plugins

경고: 사용자 정의 PostCSS 설정 파일을 정의하면 Next.js는 기본 동작을 완전히 비활성화합니다. 컴파일이 필요한 모든 기능을 수동으로 설정해야 하며, 여기에는 Autoprefixer (opens in a new tab)도 포함됩니다. 또한 사용자 정의 설정에 포함된 모든 플러그인을 수동으로 설치해야 합니다. 예: npm install postcss-flexbugs-fixes postcss-preset-env.

PostCSS 설정을 사용자 정의하려면, 프로젝트의 루트에 postcss.config.json 파일을 생성하세요.

다음은 Next.js에서 사용하는 기본 설정입니다:

postcss.config.json

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

알아두면 좋은 점: Next.js는 파일 이름을 '.postcssrc.json'으로 지정하거나 package.json의 'postcss' 키에서 읽을 수 있습니다.

PostCSS를 postcss.config.js 파일로 구성하는 것도 가능합니다. 이 설정은 환경에 따라 플러그인을 조건부로 포함하고자 할 때 유용합니다:

postcss.config.js

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // development 환경에서는 변환을 수행하지 않습니다.
        ],
}

알아두면 좋은 점: Next.js는 파일 이름을 .postcssrc.js로 지정할 수도 있습니다.

PostCSS 플러그인을 가져올 때 require()를 사용하지 마세요. 플러그인은 문자열로 지정해야 합니다.

알아두면 좋은 점: 동일한 프로젝트에서 postcss.config.js가 다른 non-Next.js 도구를 지원해야 하는 경우, 다음과 같이 상호 운용 가능한 객체 기반 형식을 대신 사용해야 합니다:
module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}

Babel Custom Server