Next.js: CSS 파일을 가져 오시겠습니까?

이것은 서버에서 작동하지 않는다는 의미입니까?
아직이 문제에 대한 해결 방법이 없다고 생각합니다. cc @arunoda

아 맞다, 이것이 작동하려면 next.config.js의 webpack 구성이 양쪽에서 작동하는 방법이 필요하다고 생각합니다.

Next가 CSS 또는 SASS로 멋지게 플레이 할 수 없다는 점에서 비슷한 문제가 있습니다. 내 페이지로 가져 오는 표준 React 구성 요소가 포함 된 components 디렉토리가 있지만 SASS (또는 CSS) 파일로 가져 오려고 할 때마다 ~ "이 파일에 적절한 로더를 사용해야합니다." 유형 오류 메시지.

일반적으로 React에서 나는 SASS 파일을 가져오고 스타일, CSS 및 sass 로더를 사용하여 Webpack을 컴파일합니다. next.config.js 파일에 추가하려고 시도했지만 NPM이 설치했지만 여전히 동일한 오류 메시지가 나타납니다.

내 next.config.js 파일 :

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push({ test: /\.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] });
    return config;
  }
}

이 질문이 멍청하게 들리거나 그에 대한 답변을 설명하는 문서에서 분명한 것을 놓친 경우 미안하지만, 누군가 SASS (또는 최소한 CSS)를 구성 요소 또는 페이지로 가져 오거나 컴파일하는 작업 예제가 있다면 로드 / 컴파일하기 위해 next.config.js 에 추가하는 데 필요한 것이 무엇이든 대단히 감사하겠습니다. 감사!

css-modules-require-hook을 사용하고 있습니다.
CSS가 작동하도록합니다.

@spacedragon css-modules-require-hook을 Next.js와 통합하는 방법의 예가 있습니까? 작동하는 데 문제가 있습니다.

누군가이 작업을 수행하는 방법에 대해 밝힐 수 있거나 Next 내에서 CSS 파일을 가져올 수 있다면 SASS를 컴파일하는 데 여전히 문제가 있습니다 (코드 예제를 통해).

README 파일이 SVG 로더 예제를 제거하도록 업데이트되었으며 SVG, CSS 및 SASS와 같은 파일에 대한 로더를 추가하는 것은 권장되지 않습니다. 인라인 CSS가 왜 괜찮은지는 모르겠지만 가져온 CSS는 그렇지 않지만 그럴만 한 이유가 있다고 확신합니다. 현재 JS 정의 / 인라인 CSS 및 SASS를 처리하지 않는 최상의 전략에 대해 확신이 없습니다.

@MikeDigitize # 627 및 # 638

실제로 가능하고 서버 측에서 스타일을 처리하는 것이 매우 쉽습니다.

노드에서 직접 :

require.extensions['.css'] = function(file) {
    console.log(file.id)
    return;
}

바벨 레지스터를 통해 :

// from https://babeljs.io/docs/core-packages/babel-register/
require("babel-register")({
  // Optional ignore regex - if any filenames **do** match this regex then they
  // aren't compiled.
  ignore: /regex/,

  // Ignore can also be specified as a function.
  ignore: function(filename) {
    if (filename === '/path/to/es6-file.js') {
      return false;
    } else {
      return true;
    }
  },

  // Optional only regex - if any filenames **don't** match this regex then they
  // aren't compiled
  only: /my_es6_folder/,

  // Setting this will remove the currently hooked extensions of .es6, `.es`, `.jsx`
  // and .js so you'll have to add them back if you want them to be used again.
  extensions: [".es6", ".es", ".jsx", ".js"]
});

웹팩 로더를 통해 :

• 로더 무시-https: //www.npmjs.com/package/ignore-loader
• isomorphic-style-loader- https :

서버에서 렌더링하는 동안 중요한 CSS를 인라인 할 수 있으므로 개인적으로 isomorphic-style-loader를 사용합니다. 핫 리로딩 및 기타 DX 관련 항목도 작동합니다. 타사 구성 요소를 사용하는 것이 복잡하고 어떻게 든 CSS에서 C를 제거하기 때문에 JS에서 CSS의 팬이 아닙니다.

@viktorbezdek next.js 와 함께 isomorphic-style-loader를 성공적으로 사용 했습니까?

@noeljackson 실제로는 아니지만 그렇게 할 생각입니다. Next.js는 유망 해 보이며 작동하면 많은 시간을 절약 할 수 있습니다. 다음 1 ~ 2 주 내에 조사하고 성공하면 풀 요청을 제출합니다.

@viktorbezdek 제가 겠습니다 . 나는 내가 무능하지 않다는 것을 알고 있지만 이것을 알아낼만큼 바벨 변환을 디버깅하는 방법을 이해하지 못한다. 나는 이러한 아이디어의 순열을 시도했지만 아무것도 100 % 작동하지 않습니다. babel-plugin-webpack-loaders를 사용하여 데이터 인코딩 된 스타일 시트를 가져 오도록 raw-loader를 가져올 수 있었지만 스타일 로더는 작동하지 않습니다. 들어 주셔서 감사합니다! :) 매우 감사.

이것에 대한 해결책이 있습니까? 전 세계적으로 CSS를 포함 할 필요가 없도록 솔루션을보고 싶습니다.

FWIW, 방금 /static 폴더에 CSS 파일을 넣었습니다. 좋은 코 로케이션은 아니지만 큰 문제는 아닙니다.

해결책이있을 것입니다. 나는 그것을 끝내지 못했습니다. 나는 작동하는 것처럼 보이는 최초의 프로토 타입을 로컬에서 만들었지 만 완성하는 데 몇 시간이 필요합니다. 주말이 지나면 끝날 거라고 확신 해요. 계속 지켜봐주세요.

@matthewmueller CSS 모듈을 사용하고 있습니까?

@viktorbezdek 작업 해 주셔서 감사합니다! CSS 모듈 지원 (또는 유사)은이 프로젝트 IMO에 중요합니다. 스타일이 지정된 jsx는 간단한 상황에는 적합하지만 스타일이 많은 구성 요소에서는 읽기가 어렵습니다.

이와 같은 바벨 플러그인이 옵션일까요 (서버 측도 마찬가지)? https://github.com/gajus/babel-plugin-react-css-modules

나는 이것을 작동 시키려고 노력했지만 운이 없다 : /

babel-plugin-css-modules-transform 와 함께 작동하는 CSS 모듈이 있습니다. 내 포크 에서 내 해키 예제를 참조하십시오.

단점은 CSS를 변경할 때마다 서버를 종료하고 다시 시작해야한다는 것입니다.

일부 React 구성 요소는 import 가능한 정적 리소스를 통해 기본 스타일을 노출합니다. 예를 들어 https://github.com/react-component/slider 의 기본 스타일을 가져 오려면 다음을 사용합니다.

import 'rc-slider/assets/index.css';

static/ 디렉터리에이 스타일 시트를 복사하여 붙여 넣을 수는 있지만 향후 구성 요소 업데이트에서 업스트림 스타일과 동기화되지 않으며이 구성 요소 설명서에서 권장하는 것과 일치하지 않습니다.

문제는 이러한 CSS 파일이 전역 효과를 도입한다는 것입니다. CSS를 _capture_하고 React 라이프 사이클에 넣어서 마운트 해제, 서버 렌더링 등을 수행 할 수 있어야합니다.

많은 도서관에서 그렇게하지만 좋은 패턴이라고 생각하지 않습니다.

Zeit Next 내부에 익숙하지 않지만 import 의 정적 분석을 사용하여 CSS를 등록 / 캡처 할 수 있습니까?

우리는 할 수 있지만 정말 이상 할 것입니다. render() 외부에있는 것과 유사하게 구성 요소 수명주기 내에 마법처럼 삽입됩니다.

// 다른 사람과 공유 할 것이라고 생각했습니다.

글쎄 ... 나는 CSS를 해킹하는 데 너무 많은 시간을 보냈지 만 (나를 위해) 작동하는 솔루션에 도달했습니다. 물론 해킹이지만 핫 리로딩이 작동하고 서버 측 구축도 마찬가지입니다.

이 gulpfile (https://gist.github.com/auser/25e88e39d83413773c01f4c000ec2806)과 함께 (_shudder_) gulp를 사용하면 모든 **/*.scss 파일이 함께 연결되고 내가 마운트하는 Styles 구성 요소로 밀려납니다. "일반"요소로 페이지.

다음에 진정한 postcss 지원을받을 수있을 때까지 이것이 다른 사람에게 도움이되기를 바랍니다.

@auser 해킹

편집하다:
Btw, gulpfile에 sass 파서를 추가해야합니다!

예 그리고 아니오 ... 저는 단지 .scss 확장자를 사용하여 순수 CSS 파일과 미리 컴파일 된 파일을 구별합니다. postcss ( precss )는 sass를 충분히 모방하기 때문에 나는 하나가 없습니다. sass 파서로 자유롭게 편집하십시오.

현재로서는 gulp를 사용하여 css 파일을 컴파일하고 인라인으로 빌드하거나 핫 리로딩을 신경 쓰지 않는 경우 / static에서도 최상의 솔루션 인 것 같습니다.

css import + hot reload가 깨끗한 방식으로 작동합니다. CSS는 문자열로 가져오고 사용자는 다른 문자열과 마찬가지로 페이지에서이를 인라인 할 수 있습니다. 이 예제를 보시고 테스트를 도와주세요. PR은 환영합니다!

https://github.com/davibe/next.js-css-global-style-test

이 예제는 next.js 공식 예제로 만들어야한다고 생각합니다. 그렇습니까? @rauchg @arunoda @nkzawa (직접 관련되지 않은 사람을 태그하면 죄송합니다)

@davibe 데모 및 babel-plugin-wrap-in-js에 감사드립니다.

예제에서 CSS 파일과 SCSS 파일을 사용하는 것을 볼 수 있습니다. 이것이 postcss 및 cssnext에서 작동하는지 알고 있습니까?

@ khrome83 왜 안되는지 모르겠지만 .babelrc 및 next.config.js를 조정하는 문제라고 생각합니다.

@davibe 구성에 따라 내 앱을 배포 할 수 없음을 발견했습니다. 빌드가 .babelrc 파일에서 next/babel 을 읽을 수 없습니다. 문제를 제출했지만이 모든 것에서 해결책이 나오기를 정말 기대합니다. 의 용이성 누락 import file.css 에서 create-react-app ,하지만 난 앞으로 해결책이 있어야 알고 :)

내가 원하는 솔루션은 다음과 같은 것입니다.

https://github.com/zeit/styled-jsx/pull/100#issuecomment -277133969

우리 는 .css 가져 오기를 지원할 수 있습니다 (단순히 문자열을 내보내는 모듈로 트랜스 파일함으로써) (그리고 마찬가지로 순수 리 액트 컴포넌트로 트랜스 파일하여 .svg 를 지원할 수 있습니다)

마찬가지로 .svg를 순수한 반응 구성 요소로 변환하여 지원할 수 있습니다.

이것은 매우 간단한 트릭입니다. 다른 프로젝트에서 어떻게 처리했는지 보여주는 기본 예제를 만들겠습니다. =)

편집 : https://github.com/zeit/next.js/pull/982 참조

@davibe 샘플을 기반으로 https://github.com/moxystudio/next.js-style-loader 를 만들었습니다. 그러면 CSS 파일을 next.js 프로젝트에 쉽게 추가 할 수 있습니다. 사용자가 탐색 할 때 스타일 시트를 추가 / 제거한다는 점에서 webpack의 style-loader 와 유사합니다. SSR도 지원합니다.

css-loader (css 모듈 포함 및 제외), postcss-loader , sass-loader 및 기타 가능하면 잘 작동합니다. css-loader를 사용하는 경우 url 옵션은 false beucase next.js 이미지, 글꼴 등이 /static 되어야합니다. 이 모든 정보는 README에서 찾을 수 있습니다.

즐기시고 피드백을주세요!

repo에 감사드립니다! CSS 파일을 가져 오는 데 효과적이었습니다. blueprintjs를 시도하고 있는데 CSS가 올바르게로드되는 것 같습니다! 그러나 CSS에 포함 된 @ font-face 규칙이 작동하지 않는 것 같습니다. :

--------------------편집하다----------------------

실제로 작동하고 있습니다.
그러나 기본적으로 nextjs 라우팅은 / static / 외부에서 정적 콘텐츠를 제공 할 수 없으며 상대 경로로 인해 실제로 허용되지 않는 경로로로드되기 때문에 아이콘이로드되지 않습니다.

@pencilcheck yes / static을 가리키는 경로를 사용해야합니다. 아마도 README에서 더 명확하게 설명하겠습니다.

fonts atm과 같은 CSS 파일에 포함 된 상대 경로와 관련된 해결 방법이 있습니까? 아니면 전체 글꼴 파일과 CSS를 정적 폴더에 복사해야 작동합니까?

@pencilcheck 는 CSS 파일이 정적 외부에있을 수 /static/file 참조해야합니다.

알겠습니다. 그러나 npm 패키지 인 blueprint를 사용하고 있으므로 node_modules 내부의 파일을 수정할 필요가 없도록하고 싶습니다.

@pencilcheck 불행히도 불가능합니다. next.js는 이미지 및 기타 자산을 처리하는 방법이 매우 엄격합니다. 이 대화를 더럽 히지 말고 가능한 경우 next-style-loader repo에서 문제를 생성하십시오.

@tgoldenberg 문제를 더 잘 설명하거나 재현 방법을 알려

@davibe , yarn 이상 npm install yarn 사용하면 문제가 발생했습니다. Yarn은 설명 할 수없는 오류를 던졌지 만 일단 제거하면 예제가 프로덕션에서 잘 작동했습니다.

나는 이것을 설정하는 데 4 시간을 보냈고 시간을 절약하려는 모든 사람에게 관심이있을 것이라고 생각했습니다. 현재 예제와 마찬가지로 변경시 스타일을 자동으로 적용하고 PostCSS를 통해 CSS를 실행하며 css-loader 에서 로컬 모듈 이름을 제공합니다. 후자의 부재는 "글로벌 css"/ "css 수입"예제의 현재 상태에서 저에게 주요 거래 중단 요인이었습니다.

component.js

import React from 'react';
import stylesheet from './styles.css';

const [css, className] = stylesheet;
const Component = () => (
    <p className={className.paragraph}>
        <Head><style dangerouslySetInnerHTML={{__html: css}} /></Head>
        bazinga
    </p>
);

.babelrc

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        ["wrap-in-js", {
            "extensions": ["css$"]
        }]
    ]
}

next.config.js
exports-loader 의 놀라운 해킹에 주목하세요. 더 나은 방법이 있어야합니다. 확실히 ???

module.exports = {
    webpack: (config) => {
        config.module.rules.push(
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'emit-file-loader',
                        options: {
                            name: 'dist/[path][name].[ext]'
                        }
                    },
                    {
                        loader: 'raw-loader'
                    },
                    {
                        loader: 'val-loader'
                    },
                    {
                        loader: 'exports-loader',
                        options: {
                            0: 'exports[0][1]',
                            1: 'exports.locals'
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            minimize: true
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            }
        );

        return config;
    }
};

저는 @satazor 가 스레드에서 더 높은 냈습니다 : https://github.com/jozanza/next-css-json-loader.

next.config.js 몇 줄만 추가하면됩니다.

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.css$/,
      loader: 'emit-file-loader',
      options: {
        name: 'dist/[path][name].[ext]',
      }
    }, {
      test: /\.css$/,
      loader: 'babel-loader!next-css-json-loader',
    });
    return config;
  },
};

스타일은 js 객체로 가져 오므로 glamor 및 유사한 솔루션과 함께 사용하기가 매우 쉽습니다.

// .css files now conveniently expose all styles as js objects
import styles from 'some-package/styles.css';
import { css } from 'glamor';
// ...
<div {...css(styles)}>
  this is a nice box. 
</div>

건배! 🍻 :)

마크 다운 파일을 문자열로 가져 오는 데이 작업을 수행하는 방법이 있습니까? 현재 원시 로더를 사용하고 있지만 웹팩 플러그인이므로 서버에서 작동하지 않습니다.

뿡 빵뀨

방금 markdown 가져 오기를 위해 babel 플러그인을 작성했습니다. 지금은 내 모바일에서 내 GitHub를 보면 볼 수 있습니다.

@ khrome83 굉장한 소리. 그것을 시도하기를 기대

@ khrome83 감사합니다! 내가 한번해볼 게

이 작업을 정말 빨리해야했기 때문에 readme를 업데이트하지 않았습니다. 하지만 바벨 플러그인으로 포함하고

'File.md'에서 파일 가져 오기;

나는 그것을 일했다, 감사합니다! 매우 도움이 됨

이것은 주제에서 벗어난 것이지만 문제가 종결되었으므로 자유롭게 자세히 설명하겠습니다. :)

마크 다운의 경우 수행 할 수있는 작업은 두 가지입니다.

(1)
하나는 마크 다운 파일을 문자열로 포함시킨 다음 런타임에 html / react로 변환하는 것입니다. css에 대한 next.js 예제 examples/with-globa-stylesheet/.babelrc 에서 사용 된 것처럼 일반 wrap-in-js babel 로더 를 사용하여 마크 다운 파일 확장자에 등록 할 수 있습니다.

(2)
당신이 할 수있는 또 다른 일은 markdown-in-js를 사용하여 트랜스 파일시 마크 다운을 번역하는 것입니다.
마크 다운 문서가 이미 미리 렌더링되었으므로 런타임에 더 빠르기 때문에 일부 시나리오에서 더 흥미로울 수 있습니다 (js 만 실행합니다). 또한 라이브러리를 사용하면 사용자 지정 React 구성 요소를 삽입 할 수 있습니다. 불행히도이 경우 source.js 과 같이 마크 다운을 인라인으로 작성해야합니다.

(2)를 선택하면 markdown-in-js 구문에 대한 구문 hilight를 제공하는 atom 플러그인이 있으며 language-markdown-in-js

@davibe 팁 주셔서 감사합니다! 나는 markdown을 빌드 시간으로 구문 분석하고 싶지만 markdown-in-js에 대한 유일한 문제는 작성하는 동안 백틱을 이스케이프하는 것입니다. ?

뿡 빵뀨

그녀의 마크 다운 렌더링이 있습니다. 플러그인을 작성한 이유도 똑같습니다. 마크 다운을 문자열로 끌어온 다음 react-markdown을 통해 실행합니다. 모든 목록을 처리하는 List 구성 요소와 같이 마크 다운 렌더 조각을 나타내는 반응 구성 요소를 전달할 수 있기 때문에 이것은 점점 더 잘 작동합니다. Styled JSX와 잘 작동합니다.

이것에 대한 업데이트가 있습니까? 위의 의견을 통해 현재 완벽한 솔루션이 없음을 알 수 있습니다.
아루
isomorphic-style-loader- https: //www.npmjs.com/package/isomorphic-style-loader를 사용하여 예제를 가질 수

그거 정말 완벽 할것 같아!

.css 또는 .scss 파일을 차례로 가져 오는 npm 패키지에서 반응 구성 요소를 가져올 때 해결책이 있습니까? 기본적으로 node_modules에서 가져온 파일을 트랜스 파일

몇 주 동안 CRA (Create-React-App)를 사용해 왔지만 오늘은 Next.js를 접했고 CRA가 현재 서버 측 렌더링 (SSR)을 지원하지 않기 때문에 정말 부끄러 웠습니다.
기본적으로 SSR 지원을 위해 Next.js로 전환하고 싶지만 .scss 파일을 가져올 수없는 것은 저를 방해합니다.
Webpack 구성에 SASS 로더를 추가하는 방법을 찾은 사람이 있습니까?

cr101에 동의하고 CSS / SASS에 대한 지원이 없다는 것은 나에게 옵션이 아닌 기초와 같은 CSS 프레임 워크를 버려야한다는 것을 의미합니다.

@davibe에서 제공하는 저장소를 사용하고 있었지만 그는 더 이상 유지 관리하지 않으며 최신 빌드 가 그가 보유한 솔루션으로 중단됩니다 .

누군가가 이것에 대한 해결책을 찾았다면 좋아할 것입니다. 2.4.1로 업데이트하는 것은 보안 버그로 인해 절대적으로 필요했기 때문에 다시 내려갈 수있는 옵션이 없습니다.

@Yuripetusko @ cr101 @tgoldenberg 절대적으로 동의합니다. 솔직히 다음은 상자에서 벗어난 일을 할 수 있다는 것이 정말 대단하다고 생각합니다. 하드 코딩 된 구조 (필수 /pages 디렉토리, /static 등)도 괜찮습니다. 그러나 완전히 지원되지 않는 scss 모듈은 우리에게 모든 것을 망가 뜨립니다. 자동 중단 점과 모든 항목의 종횡비 재 계산이 포함 된 매우 복잡한 scss 구조가 있습니다. 우리는 구조를 완벽하게 만들기 위해 열심히 노력했습니다. 다음은 우리가 존재하는 순간에 가지고있는 모든 scss 물건을 버릴 수 없다는 점입니다. 지원되지 않는 scss 는이 아름다운 도구로의 마이그레이션을 막는 유일한 방법이지만 가장 중요한 것입니다.

사실 # 1615-진행중인 작업이 있습니다. @timmywil 이 next 과 (와) 함께 작동하도록 isomorphic-style-loader 을 (를) 설정하려고합니다. 관심있는 모든 사람이 가입하고 참여할 수 있습니다.

이 스레드가 가리키는 모든 솔루션을 시도했지만 그중 하나를 작동시킬 수 있습니다. 그래서 저는 제 자신의 시도를하기로 결정했고 여기에 그것을 문서화했습니다

@almeynman 감사합니다! 확실히 당신의 접근 방식을 볼 것입니다!
그건 그렇고, 나는 이 예제에 따라 scss 모듈이 작동하도록 관리했습니다. 내가 한 것은 sass-loader 하고 소스 맵을 활성화하는 것뿐입니다.

이런 식으로 next.js 지원 CSS (심지어 SCSS)를 만들 수있었습니다.

먼저 next.config.js 에서 주어진 로더와 DefintPlugin 인스턴스를 추가하여 웹팩 구성을 조정합니다.

const webpack = require('webpack');

module.exports = {
  webpack: (config, {dev}) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ],
      exclude: /node_modules/,
    });

    config.plugins.push(
      new webpack.DefinePlugin({
        "process.env": {
          // flag to indicate this is for browser-side
          BROWSER: JSON.stringify(true),
       }
      })
    );

    return config;
  }
};

그런 다음 구성 요소 코드에서 조건이있는 스타일 파일이 필요합니다. 브라우저 측 번들링에만 스타일 모듈이 있는지 확인합니다.

if (process.env.BROWSER) {
  require("./style.scss");
}

if (process.env.BROWSER) 괜찮다면 완벽하게 작동합니다.

좋은 접근 방식이 여기 있습니다

@almeynman IMO는 해당 페이지와 관련된 CSS 스타일 만로드하는 대신 모든 페이지에서 전체 웹 사이트에 대한 CSS 코드를로드하므로 그리 좋은 접근 방식은 아닙니다.
전체 웹 사이트에 CSS 대신 필요한 .scss 파일 만 가져 오면 필요한 CSS 코드 만로드하여 페이지 크기를 크게 줄일 수 있습니다.

@ cr101 안녕하세요, 저는 몰랐습니다. 나는 그 설정을 실제로 사용하지 않았으며 다른 사람들을 위해 참조하기 위해 게시했습니다 (나는 그것이 좋다고 생각했습니다 ...). 나는 여전히 블로그 게시물에 설명 된 내 접근 방식을 사용합니다. 그 설정에 대한 피드백을 주시면 좋을 것입니다.

관심이 있다면 더 많은 예와 토론 :

https://github.com/iaincollins/nextjs-starter
https://github.com/zeit/next.js/issues/2534
https://github.com/zeit/next.js/tree/v3-beta/examples/with-global-stylesheet

위와이 스레드를 기반으로 PostCSS를 사용하여 변환 할 수있었습니다.

• 전역 SCSS 파일 (모듈은 동일합니다. 프로덕션을 위해 모든 CSS를 사전 컴파일하려면 진입 점이 필요합니다).
• 상대 URL을 통해 참조되는 사용자 지정 글꼴로 타사 CSS를 분리합니다 (인라인 매직을 통해 해결됨).

/static/styles/app.css 에있는 단일 CSS 파일로 변환하여 핫 리로딩이 여전히 작동합니다. styled-jsx 의 사용법에 유의하십시오. 그러나 <style dangerouslySetInnerHTML={} /> 사용하여 없이도 수행 할 수 있습니다.

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-easy-import")({ prefix: "_" }), // keep this first
    require("postcss-url")({ url: "inline" })
  ]
};

next.config.js

핫 리로드를 위해 dev 모드에서 .scss를 변환하고 prod의 단일 .css 파일로 추출하는 로더. 이것은 나에게 build/app.css 하므로 Production 빌드에서 cp build/app.css static/styles/app.css 뒤에 next build 를 추가하여 정적 내보내기에서 사용할 수 있도록하고 아래와 같이 사용자 지정 헤더에 포함합니다.

const ExtractTextPlugin = require('extract-text-webpack-plugin');

export default {
  webpack: (config, { dev }) => ({
    ...config,
    module: {
      ...config.module,
      rules: [
        ...config.module.rules,
        {
          test: /\.(css|scss)/,
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        },
        ...(dev
          ? [
              {
                test: /\.css$/,
                use: ['raw-loader', 'postcss-loader']
              },
              {
                test: /\.s(a|c)ss$/,
                use: [
                  'raw-loader',
                  {
                    loader: 'postcss-loader',
                    options: {
                      sourceMap: true
                    }
                  },
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: true
                    }                    
                  }
                ]
              }
            ]
          : [
              {
                test: /\.(css|scss)/,
                use: ExtractTextPlugin.extract({
                  use: [
                    {
                      loader: 'css-loader',
                      options: {
                        importLoaders: 2,
                        modules: false,
                        url: true,
                        minimize: true,
                        localIdentName: '[hash:base64:5]'
                      }
                    },
                    {
                      loader: 'postcss-loader'
                    },
                    {
                      loader: 'sass-loader'
                    }
                  ]
                })
              }
            ]),
        {
          test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
          loader: 'url-loader?limit=100000&&name=[name].[ext]?[hash:8]'
        }
      ]
    },
    plugins: [
      ...config.plugins,
      ...(dev ? [] : [new ExtractTextPlugin('app.css')])
    ]
  }),
};

맞춤 헤더

const inlineCSS =
  process.env.NODE_ENV !== ENV_PRODUCTION && require('styles/index.scss');
...
      <Head>
        {inlineCSS && <style jsx global> {__html: inlineCSS} </style>}
          {process.env.NODE_ENV === ENV_PRODUCTION &&
            <link
              rel="stylesheet"
              type="text/css"
              href={`/static/styles/app.css?${this.props
                .__NEXT_DATA__.buildId}`}
            />}
      </Head>

도움이 되었기를 바랍니다. 더 자세한 설명이 필요한 사람이 있으면 알려주세요. 더 많은 솔루션을 기대합니다. 다행히도 누군가는 여전히 다소 까다 롭고 손이 많이 걸리는 통합이므로 결국 좋은 플러그인을 만들 수 있습니다.

모든 .scss 파일을 단일 CSS 파일로 추출하는 대신 가져온 각 .scss 파일을 자체 CSS 파일로 컴파일하는 것이 훨씬 좋습니다. 이렇게하면 각 페이지에서 필요한 CSS 스타일 만로드 할 수 있습니다.
그래도 어떻게할지 모르겠습니다.

내 풀 요청을 확인하십시오. 좋은 해결책이 있다고 생각합니다.
https://github.com/zeit/next.js/pull/2638

@ cr101 사실입니다. 우리는 자체 내부 UI 라이브러리를 다른 프로젝트로 가져오고 있으므로 항상로드 할 파일의 큰 덩어리가 있습니다 (이상적인 것은 아니지만 여전히 그 짐승을 모듈화하는 작업). compile and serve 1 file 에서 X number of files at X locations 입니다. 더 작은 CSS 청크와 외부 캐싱 가능하고 성능이 좋은 CDN 호스팅 버전으로 나누는 절충점을 고려할 때 더 복잡해 지므로 재미 있지만 프로젝트 자체를 포함한다고 생각합니다. 편집-Next가 처리하려는 범위를 벗어난 것이 확실합니다. 우리가 목표로해야하는 최선의 방법은 Next 플러그인 또는 패턴입니다.

이것이 성능 문제가 있는지 확실하지 않지만 스타일이 지정된 구성 요소 또는 이와 유사한 것을 사용하는 경우 매우 간단한 솔루션입니다. CSS 래퍼를 만드십시오.

import styled from 'styled-components';

const Collapse = props => (
  <__Collapse>
    { props.children }
  </__Collapse>
);

export default Collapse;

/**
 * CSS
 */
const __Collapse = styled.div`
  .rc-collapse {
    background-color: #f7f7f7;
    border-radius: 3px;
    border: 1px solid #d9d9d9;
  }
  ...
`;

import RcCollapse from 'rc-collapse';
import Collapse from '~/components/rc/Collapse';

const HelpPage = () => (
  <Collapse>
    <RcCollapse>
      <RcCollapse.Panel header="Title">Content</RcCollapse.Panel>
    </RcCollapse>
  </Collapse>
);

이 접근 방식에 대해 내가 좋아하는 점은 .css 가져온 경우 원래 규칙 위에 재정의를 작성하지 않고도 소스 CSS에서 사용자 정의 할 수 있다는 것입니다 (어쨌든 대부분의 경우 수행해야 함). node_modules .css 파일.

다음은 babel-plugin-inline-import를 사용하여 CSS 파일을 가져 오는 간단한 솔루션입니다.

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "inline-import",
      {
        "extensions": [".css"]
      }
    ]
  ]
}

페이지 / 구성 요소

import "prismjs";

import { PrismCode } from "react-prism";
import prismGlobalStyles from "prismjs/themes/prism.css";

export default () => {
    return (
        <div>
            <style global jsx>
                {prismGlobalStyles}
            </style>
            <PrismCode className="language-javascript">
                {`function(noop) {
                    return noop;
                }`}
            </PrismCode>
            {/* ... */}
        </div>
    );
};

@stovmascript 이것은 아름다운 솔루션이지만 여전히 오류가 발생합니다 (https://github.com/Hacker0x01/react-datepicker에서 .css 빌드를 가져옵니다). 여기서 다른 게임이없는 것이 확실합니까? 오류로 인해 다른 수준의 CSS로드가 필요한 것 같습니다.

@hilarykitz , @stovmascript 솔루션이 저에게 효과적입니다. 발생하는 오류를 보내 주시겠습니까?

@stovmascript- 바벨 캐시를 어떻게 제거하고

1. CSS 파일 만들기
2. 파일 가져 오기
3. 대다
4. CSS 파일 변경-새 선택기 및 스타일 추가
5. Babel Cache가 이전 버전을 유지하고 있음을 목격하십시오.

@ khrome83 당신은 node_modules / .cache를 지워야합니다

캐시를 지우고 위와 함께 작동하는 babel-inline-loader 플러그인을 사용하여 더 나은 솔루션을 찾았습니다. 이 방법의 문제는 전역 스타일 만 적용 할 수 있다는 것입니다. <style jsx global> 태그가 아닌 태그에서 사용하면 목적에 맞지 않게 data-jsx가 올바르게 추가되지 않습니다.

캐시를 지우고 위와 함께 작동하는 babel-inline-loader 플러그인을 사용하여 더 나은 솔루션을 찾았습니다. 이 방법의 문제는 전역 스타일 만 적용 할 수 있다는 것입니다. 비에서 사용하는 경우

@stovmascript 의 솔루션을 사용하여 예제를 추가했습니다.

https://github.com/zeit/next.js/pull/3157

둘 이상의 외부 CSS를 어떻게 포함합니까?
동일한 구성 요소에서 필요한 라이브러리 2 개를 사용하고 각각 개별적으로 작동하지만 결합하는 방법을 모르겠습니다.

import rtStyle from 'react-table/react-table.css';
import dpStyle from 'react-datepicker/dist/react-datepicker.css';
...
render() {
    return (
      <div>
        {/* <style jsx global>{ rtStyle }</style> */}
        <style jsx global>{ dpStyle }</style>
...

@CHarnel 시도 <style jsx global>{ rtStyle }{dpStyle}</style>

@almeynman이 받고 있습니다 :

Module build failed: SyntaxError: C:/.../components/activeUsersTable.js: 
Expected one child under JSX Style tag, but got 2 (eg: <style jsx>{`hi`}</style>)

@CHarnel은 둘 다 템플릿 문자열에

@CHarnel 이 접근 방식을 시도하십시오.
<style jsx global>{ $ {rtStyle} $ {dpStyle} }</style>

뿡뿡

나는 그 CSS를 하나의 js 파일에 넣고 그것을 내보내려고합니다.

import bootstrap from 'bootstrap/dist/css/bootstrap.min.css'
import styles from './index.css'

export default bootstrap + styles

그리고 그냥

import styles from '../styles'
...
<style jsx global>{styles}</style>

https://github.com/sheerun/extracted-loader 를 사용하면 개발 및 프로덕션 모두에 ExtractTextPlugin을 사용할 수 있으며 개발시 다른 html을 사용하거나 CSS를 js에 삽입 할 필요가 없습니다.

@comus 나는 당신의 접근 방식을 사용

@sheerun 좋은 사람, 감사합니다

next.js에 훨씬 더 포괄적 인 예제를 제출했습니다.
https://github.com/zeit/next.js/pull/3451

이것은 nextjs v4 이전에 작동했습니다.

<style jsx global>{style}</style> <style jsx global>{colors}</style> <style jsx global>{layout}</style>

이 aproach를 사용하여 jsx 전역 스타일을로드하는 이유는 무엇입니까? <style jsx global>{ rtStyle }{dpStyle}</style>

저는 emit-files-loader 기반으로 한 솔루션을 만들었습니다. 관심이 있다면 여기에 게시 할 수 있지만 사용자 정의 서버 설정에 의존합니다. 기본적으로 .next 빌드 디렉토리 내에서 단일 디렉토리를 정적으로 제공 할 수 있어야합니다. 서버의 /_next/... 경로 구조에 의존하여 서버없이 구성 할 수 있습니다.

그 외에는 import stylesheet from './styles/style.[scss|less|stylus|w/e]'; 를 작성할 수 있으며 스타일 시트 파일의 공용 경로가되므로 <link> 넣을 수 있습니다. 영구 캐싱을 위해 ?[hash] 되며 핫 리로드를 수행합니다.

@nikolakanacki 공식 지원이 곧 도입 될 예정입니다 🙏 https://github.com/zeit/next.js/pull/3578

@timneutkens 나는 이것을 본 적이 있는데, "매우 곧"에 대한 평가가 있습니까? 이미 카나리아에있는 것 같습니다.
나는 바로 해결책이 필요했고, 하나를 찾기 위해 2-3 일을 보냈고, 기본적으로 "쉬운 수정"인 나만의 솔루션을 작성했습니다. 나는 그것을 extract-text-webpack-plugin 결합하여 모든 별도의 .[css|stylus|less|scss] 파일을 정적으로 조인하고 다음 없이도 일반적으로 사용하는 것처럼 단일 정적 리소스로 모두 사용할 수 있도록하는 방법을 고려하고 있습니다.

이 문제의이면에있는 주요 문제는 프로덕션 및 개발 빌드 뒤에 백그라운드에서 많은 "마법"이 진행되고 있으며 핫 리로딩 및 기타 작업이 있다는 것입니다. 소스를 읽고 어떻게 조립되는지 볼 수 있습니다. 하지만 그것을 만든 사람이 그것에 대해 문서를 작성하면 더 많은 사람들이 기여할 수 있다고 생각합니다.

@kimsj_ssj ᄏ ᄏ ᄏ ᄏ ᄏ ᄏ

이 파일을 extract-text-webpack-plugin과 결합하여 별도의 모든. [css | stylus | less | scss] 파일을 정적으로 조인하고 다음없이 일반적으로 사용하는 것처럼 단일 정적 리소스로 모두 사용할 수 있도록하는 방법도 생각하고 있습니다. .

다음 v5 용으로 작성한 플러그인은 이미이 작업을 수행하고 있으며 곧 오픈 소스가 될 것입니다 👍

내부 문서 작성과 관련하여 v5가 출시 된 후 모든 것이 어떻게 작동하는지 문서화 할 계획입니다.

@timneutkens 감사합니다!

@timneutkens 업데이트에 감사드립니다.이 문제가 발생하면 여기에 업데이트를 게시하십시오!

이것에 대한 소식이 있습니까?

다른 소식이 무엇인지 잘 모르겠습니다 🤔

이것은 Next.js v5에서 릴리스되었습니다.
Readme https://github.com/zeit/next.js#importing -css--sass--less--stylus-files에도 있습니다.

또한 언급 된 PR이 합병되어이 문제가 종결되었습니다.

루트 프로젝트에 / static 폴더를 만들고 / static 안에 file.css를 넣은 다음 헤더 html 구조 호크에.

import Head from 'next/head';
<Head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="/static/css/custom.css" />
</Head>

그런 다음 어디서나 className을 사용하십시오!

@comus

매우 포괄적이고 똑똑합니다 .. 감사합니다 .. 하루 종일 이런 종류의 솔루션을 찾고 있습니다 ..

루트 프로젝트에 / static 폴더를 만들고 file.css를 / static 안에 넣은 다음 Header html structure hock에 넣으십시오.

import Head from 'next/head';
<Head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="/static/css/custom.css" />
</Head>

그런 다음 어디서나 className을 사용하십시오!

애플리케이션의 루트 (package.json 파일이있는 위치)에 '공용'폴더를 만듭니다.

# 8626을 통해 지원이 추가됩니다!