내장 Sass 지원

Next.js 9.3에서 내장 Sass가 지원되는 것 같습니다.
htps // // 네 xtjs. rg/bぉg/네 xt9-3 #부이 lt ーーーーーーーーーーーーーーーーーーーーーぉ

기존 Built-in CSS와 같은 느낌으로,
글로벌 스타일 외에도 CSS 모듈로도 사용할 수 있습니다.

내장되어 있으므로 설정없이 사용할 수 있지만 sass 모듈을 설치합시다.

yarn add sass
# or
npm install sass

템플릿의 git을 만들었으므로 여기에서 부디.
htps : // 기주 b. 코 m / 이토 미세 / 네 xt-mp ぁ
sass 이외의 부분은 아래의 기사를 참고로 하고 있습니다.
htps : // 코 m / 슈지 히가 / ms / 931에 44046c17f53b432b

글로벌 스타일

전역적으로 사용하려는 스타일은 _app.tsx에서 ~.scss와 같은 파일 이름으로 가져옵니다.

// global style - - -
import 'sanitize.css'
import '../styles/common.scss'

class MyApp extends App {
  render(): JSX.Element {
    const { Component, pageProps }: AppProps = this.props

    return (
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    )
  }
}

export default MyApp

글로벌 스타일은 _app.tsx에서만 적용할 수 있는 것 같습니다.

모듈

CSS 모듈로 사용하려면 파일 이름을 ~.module.scss or ~.module.sass로 설정하고 다음과 같이 작성하십시오.

import style from '../../styles/layout/Header.module.scss'

const Header: NextComponentType = () => {
  return (
    <>
      <div className={style.l_header}>
        <p>Header</p>
      </div>
    </>
  )
}

실제 클래스 이름은 다음과 같습니다.
자동으로 이름을 바꾸어주므로 이름 충돌도 없어지네요.

post css에서 autoprefixer 적용

루트에 postcss.config.json를 넣는 것만으로 autoprefixer가 적용됩니다.
아래와 같이 기술하면 괜찮은 것 같습니다.

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