Next.js: 외부 CSS 및 scss 파일 작업

에 만든 2017년 10월 19일 · 38코멘트 · 출처: vercel/next.js

제가 알고 있는 중복 문제지만 의도적으로 이 문제를 열었습니다. 내가 next.js 상용구(redux, redux-saga, ... 포함)를 설정하는 데 3일이 걸리고 외부 CSS 및 scss 파일을 로드하는 설정에 갇힌 지 이틀이 되었습니다. with-global-stylesheet 및 with-scoped-stylesheet-and-postcss 예제를 확인했지만 각각 이전 문제에서 언급한 주요 문제가 있습니다. 해킹으로 이 문제를 해결하는 공개 및 폐쇄 문제를 너무 많이 봤습니다... 최상의 솔루션을 찾기 위해 문제를 방치하는 대신 더 나은 솔루션을 찾을 때까지 현재 사용 가능한 솔루션으로 해결하는 것이 좋은 생각이라고 생각합니다. 많은 사람들이 지금 이 문제를 겪고 있고 지금 해결되기를 원하기 때문입니다!

출처

arefaslani

👍66

가장 유용한 댓글

나는 또한 개인적으로 사람들이 이 문제에 대해 가지고 있는 어조를 좋아하지 않는다는 점을 지적하고 싶습니다.
나는 당신이 CSS를 가져오고 싶어한다는 것을 완전히 이해합니다. 그리고 우리는 이 요청을 잘 알고 있습니다. 그래서 지난 한 주 동안 최상의 솔루션을 찾기 위해 노력했습니다 👍
이것에 대한 자세한 내용은 곧. 그때까지 친절하고 행복한 명절 보내세요 🎅😄

timneutkens 에 2017년 12월 28일

❤21 🎉12 👍8

모든 38 댓글

나는 styled-jsx만이 깨끗한(핫 리로딩 포함) 지원을 가지고 있다는 것에 동의합니다. 이것이 제가 빠른 프로토타이핑이 필요할 때를 제외하고는 Next.js를 사용하지 못하게 하는 이유입니다.

CSS 모듈의 CSS 범위 지정 문제에 대한 솔루션은 훨씬 더 깔끔한 것이며 CSS 모듈을 사용하면 여전히 클래스를 자식 구성 요소에 전달할 수 있습니다( babel-plugin-inline-react-svg 가져온 SVG에 비전역 클래스를 넣어보십시오. styled-jsx 사용).

그리고 저는 표준화된 .css 파일을 사용하여 가능한 한 프레임워크 락인을 방지하고 캐싱을 위해 프로덕션에서 외부 CSS 파일을 사용하는 것을 선호합니다. 여전히 IE8을 지원해야 함).

CrocoDillon 에 2017년 10월 22일

👍14

엄청난 +1
외부 css/scss와 같은 단순한 것을 next.js로 달성하는 것이 거의 불가능하여 내 애플리케이션의 90%에서 쓸모없게 된다는 것은 큰 좌절입니다.

저는 부트스트랩으로 작업하고 있으며 외부 범위 CSS를 추가하여 하나의 글로벌 부트스트랩 CSS 가져오기가 있는 구성이 필요합니다.

israelidanny 에 2017년 10월 25일

👍38

스타일이 지정된 jsx 1( 컴파일 처리를 위한 webpack )을 사용하여 외부 스타일러스를 작동하는 데 성공했지만 별도의 CSS 파일을 처리하는 변경 사항이 도입된 이후로 스타일이 지정된 jsx 2에서 이를 파악하는 데 어려움을 겪었습니다.
현재 접근 방식:

import ComponentStyles from './footer.styl';
...
      <style jsx>
        {ComponentStyles}
      </style>

https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-scss 가 외부 scss 파일로 작업하는 것을 보는 것이 좋을 것입니다.

ilionic 에 2017년 10월 30일

👍6

환경을 구축할 때도 같은 시련을 겪었습니다.
결국 우리는 Lost-Grid가 있는 scss+post CSS가 있는 전역 스타일시트로 해결했습니다.
핫 리로딩이 작동하므로 이상적인 솔루션은 아니지만(전체 스타일시트가 한 번에 모두 로드되기 때문에) 적절한 절충안입니다.

종속성

"autoprefixer": "^7.1.6",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-wrap-in-js": "^1.1.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"pixrem": "^4.0.1",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^2.0.8"

package.json

  ...
  "postcss": {
    "plugins": {
      "lost": {},
      "postcss-easy-import": {
        "prefix": "_"
      },
      "autoprefixer": {},
      "pixrem": {}
    }
  }
  ...

next.config.js

webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      }
    ,
      {
        test: /\.css$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader']
      }
    ,
      {
        test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader',
          { loader: 'sass-loader',
            options: {
              includePaths: ['styles', 'node_modules']
                .map((d) => path.join(__dirname, d))
                .map((g) => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            }
          }
        ]
      }
    )
    return config
  }

pages/_document.js

...

import stylesheet from 'styles/main.scss'

   ...
        <Head>
          <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
        </Head>
   ...

그런 다음 /styles/main.scss에서 시작하는 스타일을 관리할 수 있습니다.
도움이 되기를 바랍니다.