Next.js: [RFC] CSS 지원

.module.scss 도 작동하는 현재 지원되는 CSS 모듈 버전으로 이미 작업중인 @zeit/next-sass 같은 플러그인으로 추측하고 있습니다. 아니면 "순수한 CSS 모듈"이 .module.css 만을 의미합니까?

Sass 지원은 대부분의 프로젝트에서 성공하거나 중단하는 것입니다.

이 RFC (내장 지원)를 위해 @zeit/next-css/sass/less/stylus 플러그인은 더 이상 사용되지 않습니다. 우리는 여전히 sass가 코어와 플러그인의 일부가 될 정도에 대해 논의하고 있습니다. 내 현재 생각은 node-sass 를 추가하면 sass 지원이 활성화된다는 것입니다. TypeScript에서하는 것과 비슷합니다. 종속성으로 추가하지 않는 이유는 기본 바인딩 등으로 인해 설치 속도가 매우 크고 느리기 때문입니다.

신난다! 나는 오늘처럼 충돌하는 CSS 클래스 이름에 걸려 넘어졌다!

질문, TypeScript와 어떻게 작동합니까? 내가 CSS-모듈을 사용하도록 설정하지 않은 한 가지 이유는 즉, CSS 모듈을 가져 오는 것은 모든 객체 줄 것입니다 (같은, 어쩌면 약간의 마법을 .foo-bar 필드가 호출 될 것이다 fooBar ?) TS 친화적이지 않습니다. Next는 이제 기본적으로 TS이므로이 문제에서 더 잘할 수 있다고 생각합니까?

"사용자를 위해 알려진 플렉스 버그를 자동으로 수정"하는 것이 좋은 생각인지 확실하지 않습니다.

css 스타일 시트를 포함하는 npm의 타사 구성 요소 라이브러리가 다른 환경 (예 : create-react-app)과 nextjs 환경에서 다르게 작동하는 혼란스러운 시나리오로 끝 날까 두렵습니다.

@TheHolyWaffle은 알려진 flexbug를 수정하여 더 예측 가능한 동작을 생성하며 Create React App이하는 일이기도합니다.

@zenozen CSS 모듈 사양에 따라 camelcase에 대한 멋진 작업을 수행하지 않습니다. 대시 ( class-name )와 함께 클래스 이름을 사용하는 경우 객체에서 명시 적으로 액세스해야합니다.

예

import Everything from './file.module.css'

// later on

Everything['class-name']

TS의 경우 유형을 처리하는 마법을 계획하지 않지만 이러한 파일을 처리 할 TS 유형을 정의하는 것은 매우 쉽습니다.

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

여기서 우리가 무엇을하든 우리는 @zeit/next-css 와 같이 사용자 정의 PostCSS 플러그인을 사용하기 쉬운 지 확인할 수 있습니까? 이에 대한 지원을 잃는다면 정말 부끄러운 일입니다. CRA는이를 지원하지 않기 때문에 Tailwind CSS와 같은 도구를 합리적인 방식으로 사용하는 것이 불가능합니다.

나는 이와 관련하여 다음 세 가지 기능에주의를 기울일 것입니다.

• Autoprefixer를 사용하여 공급 업체별 접두사를 자동으로 추가 (레거시 Flexbox 지원 없음)
• 동등한 기능으로 Stage 3+ CSS 기능을 폴리 필 또는 컴파일
• 사용자를 위해 알려진 "flexbugs"를 자동으로 수정

...이 모든 작업은 PostCSS로 이루어지기 때문에 PostCSS 플러그인 순서는 최종 사용자가 제어하는 ​​것이 매우 중요합니다.

이 세 가지 플러그인을 기본적으로 활성화하려면 사용자가 자신의 postcss.config.js 파일을 제공하여 기본 PostCSS 구성을 완전히 재정의 할 수 있어야합니다. 이 경로를 사용하면 수동으로 플러그인을 추가해야하지만 제 생각에는 그 수준의 제어가 필요합니다.

TL; DR은 사용자가 PostCSS를 완전히 제어 할 수있는 능력을 손상시키지 않도록주의하십시오. 문자 그대로 CRA를 사용할 수 없기 때문에 더 이상 Next를 사용할 수 없다면 매우 슬픕니다.

Seconding @ adamwathan- 여기에서 postcss 옵션 사용자 정의가 어떻게 보이는지에 대한 자세한 내용을 얻는 것이 좋습니다. postcss.config.js 뿐만 아니라 다음 플러그인을 통해 postcss 구성을 수정할 수있는 옵션이 있으면 정말 좋을 것입니다. 따라서 여러 프로젝트에서 공유 된 구성을 추가 파일없이 쉽게 삽입 할 수 있습니다.

모든 CSS 가져 오기 ( .module 접미사뿐만 아니라)에 대해 CSS 모듈을 활성화하는 것이 더 낫다고 생각합니다. 그리고 우리가 글로벌로 만들고자하는 것은 .global 접미사를 지정해야합니다.

CSS 모듈이 좋을 것입니다. 나는 유지 생각 *.module.(css|scss) 가와 정렬처럼 사양이되어 벌금을 create-react-app , 타이프 라이터 typings 수 있도록, 새로운 Next.js에 다른 사용자가 쉽게 마이그레이션이 가능

typescript를 사용하면 typed-css-modules 및 typed-scss-modules를 사용하여 모든 *.(css|scss) 파일에 대해 *.d.ts 입력을 생성하여 CSS 모듈 입력을 적용 할 수 있습니다 *.(css|scss) 여전히 자동 완성을 원하면 다음 VS Code 확장을 사용할 수 있습니다.
https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules

@adamwathan 은 PostCSS 구성을 허용 할 것입니다. _exact_ 구현이 아직 어떻게 보일지 확신 할 수 없지만 CSS 풀 요청으로 자연스럽게 나타나야합니다.

대단합니다 !! 이에 대한 타임 라인이 있습니까? 올해도 일어나나요?

@andreisoare 우리는이 RFC의 전체 절반을 병합하려고합니다 : https://github.com/zeit/next.js/pull/8710

우리는 CSS 모듈 지원 ASAP를 계속할 것입니다!

@adamwathan @Timer 는 우리가 next-sass 로 할 수있는 것처럼 프로젝트의 루트에서 기존의 postcss.config.js 파일을 계속 사용할 수 있다면 좋을 것입니다.

이것이 핵심이되는 것을 보니 기쁩니다.

이 RFC에서 AMP 중요 경로 렌더링을 지원합니까?

기록을 위해, 가능하다면 styled-jsx를 사용해야합니다. CSS, html, js를 하나의 아이디어, 컴포넌트로 캡슐화 할 수 있기 때문입니다. 이미 이것을 깨닫지 못했다면 (이것은 메인테이너가 아닌 next.js 사용자를위한 메모입니다) 이렇게하면 부트 스트랩과 같은 전체 CSS UI 키트를 구매할 필요가 없습니다. 1 개의 컴포넌트를 사용해 볼 수 있습니다. 당신의 필요에 맞지 않는다면, 외부 CSS 의존성의 짐을 다룰 부담없이 그것을 던져 버립니다.

CSS는 종종 오해를 받거나 나중에 생각하고 종종 개발자 작업의 골칫거리가되기 때문에이 지식을 전파하는 것도 매우 중요하다고 생각합니다. 그러나 적절한 추상화를 사용하면 실제로 추론하기가 매우 쉽습니다.

"많은 사람들"이 CSS를 가져 왔다고해서 좋은 생각은 아닙니다.

react에 대한 가장 강력한 점 중 하나는 CSS, HTML 및 JS를 캡슐화한다는 사실입니다. CSS를 사이드로드 (가져 오기)하면 리 액트가 제공하는 이점이 있습니다.

기록을 위해 : CSS-in-CSS (또는 HTML)는 스타일을위한 훨씬 더 효율적인 전송 계층이며, js와 스타일을 하나의 파일에 배치하는 것이 하나의 디렉토리에 배치하는 것보다 낫지 않습니다.
더욱이-마지막 세대의 CSS-in-JS의 대부분은 성능을 위해 빌드시 CSS를 CSS로 추출하므로 정적 CSS의 적절한 관리가 필수입니다. 그러나-이러한 추출이 Next에서 지원되는 방식은 아직 공개되지 않았습니다.

기록을 위해 : smile :: Bootstrap과 같은 프레임 워크에서 SASS, LESS를 사용하는 것은 여전히 ​​중요하며 정말 훌륭하게 작동합니다! 캡슐화는 JS 수준에서 발생하지 않아야합니다. BEM을 사용하는 것이 대안입니다. 두 가지 방법을 모두 지원하는 것이 필수적입니다.

@timer 이것의 전반부 (https://github.com/zeit/next.js/pull/8710)는 이제 CSS의 경로 분할이 작동 함을 의미합니까? 아니면 아직 오지 않을까요?

(관련, https://github.com/zeit/next-plugins/issues/190)

전역 CSS는 경로 분할이 될 수 없으므로 아니요. CSS 모듈 (구성 요소 수준에서 가져온) 만 경로 분할됩니다. 👍

이것이 문제 # 9392 및 # 9385에 어떤 영향을 미치는지 설명이 있습니까? 뒤에서 무슨 일이 일어나고 있는지 이해하기 위해. 그래서 내 코드베이스의 문제를 해결하는 방법에 대한 작업을 할 수 있습니다.

안녕하세요. 우리는 주로 훌륭한 도구와 서버 측 렌더링을 활용하기 위해 React 앱을 next.js로 업그레이드하려고합니다.

그러나 우리에게 CSS 모듈을 사용할 수있는 것은 어려운 요구 사항입니다. 우리는 CSS 용 다음 플러그인을 시도했지만 # 9392 # 9385 등과 같은 문제로 혼란을 겪었습니다.

CSS 모듈 지원에 대한 ETA가 있습니까 (실험적 일지라도)? 개발 속도를 높일 수있는 방법이 있습니까?

그렇다면 컴포넌트 수준에서 CSS를 가져올 수 없습니까?

문제가 해결 될 때까지 지금 바로 해결 방법을 사용하면됩니다. 다음 css 문제 에서 당신에게 맞는 것을 찾을 수 있다고 생각합니다.

어리석은 질문에 대해 미안합니다 : 글로벌 CSS가 진행되는 한, 이것이 단순히 링크를 머리에 포함시키는 것보다 어떻게 다르거 나 더 낫습니까?

@otw 전역 CSS를 가져 오면 나머지 코드와 함께 빌드 파이프 라인을 통해 최소화되므로 next.js 빌드 및 출력의 일부가됩니다.

그것이 장점인지 당신에게 달려 있습니다. 대부분의 사람들은 특정 구성 요소에 필요한 CSS가 구성 요소가로드 될 때만로드되도록 CSS 모듈을 고대하고 있다고 생각합니다.

맥락을 들어, 우리는 지난 2 년 동안 NextJS를 사용하여 초기 단계의 스타트 업을위한 거의 40 개의 웹 애플리케이션을 구축 한 개발자 팀을 보유하고 있습니다.

여기에서 현재 요구 사항, 문제점, 직면 한 일부 필수 npm에 대한 경고 및 제안 된 변경 사항에 대한 우려 사항을 보여주기 위해 응용 프로그램 스타일을 지정하는 방법을 간략히 설명하고자합니다.

현재 구현

• 우리는 많은 핵심 앱 기능이 사전 구축 된 "스타터 키트"애플리케이션을 유지합니다. 부트 스트랩을 사용하는 것으로부터 많은 확장 된 기능을 포함하고 있기 때문에 시작점으로 복제됩니다.
• 우리는 디자인 시스템의 기초로 Bootstrap 과 Reactstrap 을 사용합니다. 우리는 일관된 디자인 시스템을 원하기 때문에 디자인 시스템 을 확장하고 추가 구성 옵션, 믹스 인, 기능 등의 형태로 자체 추가 사항을 통합 http://prntscr.com/qc8r0g.
• 대부분의 프로젝트에서 확장 된 부트 스트랩 설정에서 제공하는 유틸리티 클래스를 통해 스타일링을 할 수 있지만 예외가 있습니다. 이러한 예외의 경우 styled-jsx와 함께 SASS 플러그인을 사용합니다. SASS 플러그인을 사용하는 이유는 디자인 시스템의 일관성을 유지하기 위해 글로벌에서 부트 스트랩 변수, 함수 및 믹스 인을 가져 오기 때문입니다. 우리는 이것을 styled-jsx로 가져 오는 "jsx-helper"라는 특별한 import를 만들었습니다. 스크린 샷 : http://prntscr.com/qc8xbr.
• html, body 및 root div 태그를 터치해야하는 일부 레이아웃 구성 요소, 자체 마크 업을 생성하는 일부 플러그인 또는 포털을 사용하고 CSS가 필요한 구성 요소에서 액세스 할 수없는 마크 업을 터치해야하는 npms의 경우 전역 옵션을 사용합니다. -jsx. 이것은 최후의 수단이지만 여기에서 볼 수 있듯이 레이아웃 구성 요소에 필요합니다. http://prntscr.com/qc8yo6

현재의 단점 / 문제

• 컴포넌트에 삽입 된 SASS 코드 (IDE 문제 및 삽입 된 언어에 대한 지원 부족)를 사용 하지 않는 것이 , 필요한 경우 styled-jsx와 함께 외부 sass 파일을 사용하는 예제가 작동하지 않습니다. npm 스타일리스 . 이 프로젝트는 현재 지원되지 않는 것으로 보이므로 NextJS에서 제안한 도구 체인에 포함되지 않는 것이 좋습니다 .
• styled-jsx SASS로 가져온 글로벌 SCSS 변수의 변경 사항은 감지되지 않습니다. 사실 웹팩이 부트 스트랩 전역 변수에서 전파되는 변경 사항을 핫 리로드 할 수 없게 만드는 것으로 보이는 어떤 종류의 전역 npm 모듈 캐시가 있습니다. 전체 npm ci 를 수행하여 전체 node_modules 폴더를 다시 빌드하고, 브라우저 캐시를 지우고, 캐시 지우기 강제 콘솔 명령은 모두 여기에서 작동하는 일부 전역 npm 캐시가 있으므로 작동하지 않습니다. 따라서 컴포넌트에 적용된 CSS / SASS 모듈로 가져온 파일을 업데이트 할 때 핫 리로딩이 제대로 작동하는 것을 매우 좋아합니다. 요컨대, 구성 요소에서 수행되는 모든 SASS 처리는 가져 오기에 대한 변경 사항을 감시하고 작업 핫 리로드를 유지해야합니다. 이것은 이전 글 머리 기호에 언급 된 웹팩 로더 옵션으로 해결되었을 것입니다.
• 글로벌 SASS와 styled-jsx가 별도로 구축 되었기 때문에 PostCSS 구성을 두 개의 별도 위치로 공유하기위한 솔루션을 찾아야했습니다.

제안 된 변경 사항에 대한 우려

컴포넌트를 기반으로 html, body 및 root div 태그와 생성 된 HTML의 경우를 터치해야하는 일부 사용 사례가 있기 때문에 컴포넌트 CSS / SASS 모듈로 전역 옵션을 차단하는 아이디어에 약간 관심이 있습니다. 포털 등을 통한 배치로 인해 해당 구성 요소 내부에 필요하지 않습니다. 글로벌 SASS 및 일부 재구성으로이 문제 중 일부를 해결할 수 있으므로 특정 전역 CSS를 적용하기 위해로드되는 구성 요소에 의존하지 않습니다.

우리는 PostCSS에 대한 완전한 제어를 원하며 특정 기본값 집합을 강제로 적용하지 않아도됩니다.

죄송합니다. 긴 답변 이었지만 공유 할만한 통찰력이 있다고 생각합니다. 궁금한 점이 있으면 언제든지 알려주세요. NextJS 팀이 다음 (의도 한 말장난)을 내놓을 수 있기를 기대합니다!

@Soundvessel ,

컴포넌트를 기반으로 html, body 및 root div 태그와 생성 된 HTML의 경우를 터치해야하는 몇 가지 사용 사례가 있으므로 컴포넌트 CSS / SASS 모듈로 전역 옵션을 차단하는 아이디어에 약간 관심이 있습니다. 해당 구성 요소 내부에 필요하지 않은

올바르게 이해했다면 CSS 모듈에서 :global 를 사용하여이를 달성 할 수 있습니다.

뿡뿡

올바르게 이해했다면 CSS 모듈에서 :global 를 사용하여이를 달성 할 수 있습니다.

위의 메모 참조

CSS 모듈 지정자는 로컬 클래스 이름과 결합 될 때 허용됩니다.

레이아웃 구성 요소의 경우 로컬 클래스 이름 없이 <html> , <body> 및 루트 div 를 대상으로 합니다.

또한 이 주제 에 :global 옵션을 완전히 차단하는 것을 고려하고 있다고 언급되었는데 , 이는 건드릴 수없는 마크 업을 생성하는 많은 수의 npm 및 CMS API를 고려할 때 제게 이해가되지 않습니다. 범위가 지정된 CSS 모듈별로.

안녕하세요 @Soundvessel- 이것은 제가 제 팀을 위해 내부적으로 녹화 한 제 비디오입니다 (어떻게 액세스 할 수 있었습니까?). nextjs 팀의 견해를 직접 나타내지 않으며 제작 이후 최신 정보를 보장하지도 않습니다. 초기 실험 단계에서. RFC를이 주제에 대한 표준이라고 생각하십시오 😁

또한 camelCased 속성 등과 같은 추가 구문이 필요한 CSS 솔루션에서 복잡한 JS가 아닌 CSS / SASS를 사용할 수있는 솔루션을 제안 해 주셔서 감사합니다. HTML / CSS로 직접 작업 한 수년간의 경험을 가지고 있으며, 코드에서보고있는 내용을 화면에서 디버깅하는 내용으로 너무 깊게 전환 할 필요가 없습니다.

위에서 언급 한 내용을 놓친 경우가 아니라면 Sass의 자동 감지 / 활성화는 멋지지만 Sass API 옵션도 어딘가에 노출되어야한다는 점을 추가하고 싶습니다. [email protected] 는 사용자는 적용 할 sass 엔진을 선택합니다. 그들의 옵션은 1 : 1 이상이 될 수 있습니다 ...

CSS 모듈의 확장을 구성 할 수 있다고 제안하고 싶습니다.
.module.css 이외의 하나 이상의 확장을 지원하도록 배열을 노출 할 수 있습니까?
일부 개발자에게 많은 구성 요소가있을 때 .module.css 파일을 만들고 import "Component.module.css" .module.css 파일을 가져 오는 것은 우리에게 약간 부풀어 오른 것처럼 보입니다.

내 경우에는 내가 확장자를 가진 파일을 만들 수 있도록하고 싶습니다 .m.css 말할 Component.m.css 와 같은 가져 import "Component.m.css"

Next.js 팀이이를 방해하는 기술적 어려움이 있다고 말하지 않는 한.

불필요한 풋 프린트 증가처럼 보이기 때문에 확장 이름 지정에 대한 구성을 열어야한다고 생각하지 않지만, 이것이 구현의 일부인 경우 .module.css 확장에 대한 _need_에 의문을 제기합니다.

Next.js는 사용자 정의 pages / _app.js 내에서 전역 CSS를 가져올 수만 있습니다.

처음에는 빌드가 CSS 모듈로 파싱해야하는 것과해서는 안되는 것을 감지하는 데 .module.css 가 필요하다고 생각했지만 _app.js 외부의 구성 요소 / 페이지에서 비 모듈을 가져 오는 경우 오류가 발생하고 빌드가 중단되면 _app.js 외부에서 가져온 것은 본질적으로 CSS 모듈이어야하므로 명명 규칙이 필요하지 않습니다.

이것이 필요하지 않고 순전히 관습으로 강제되고 있습니까?

module.css 협약의 선택은 https://github.com/css-modules/css-modules에서 이미 설립 한 수도원과 충돌합니다.
여기에 예 :
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
그리고 여기:
https://www.gatsbyjs.org/docs/css-modules/

예, 확장을 구성 가능하게 만들면 필요 이상으로 복잡해질 수 있습니다. 그러나 적어도 .module.css 상수 파일에 정의 할 수 있으며 원숭이 패치를 통해 변경하기 위해 여러 위치에서 하드 코딩되지 않았습니다.

뿡뿡

이 제안 된 구현과 create-react-app 의 차이점은 another-stylesheet.css 링크 한 예제와 같은 "일반 스타일 시트"를 가져 오는 것이 전혀 허용되지 않는다는 것입니다. 이 경우 .module.css 는 빌드 도구에서 어떤 스타일 시트를 어떤 방식으로 처리해야하는지 결정하는 데 사용됩니다.

CSS 모듈 사양은 명명 규칙을 전혀 설정하지 않습니다.

CSS 모듈이 파일 확장자에 대한 규칙을 설정하지 않고 모듈을 가져 오는 방법을 알고 있습니다.

내가 가고 싶은 곳이다 .module.css Next.js 팀에 의해 선택된 규칙과 그들이 "촉진"해야 그것을 수행하는 설치 후 모듈을 통해 경우에도 가능성이 일부 사용자가이를 변경할 수 monkey patching

.module.css 이 첫 번째 명명 규칙 이라고 생각합니다. 확장. 내가 틀렸다면 나를 고쳐주세요.

module.css 협약의 선택은 이미 css-modules / css-modules가 설립 한 수녀원과 충돌
여기에 예 :
create-react-app.dev/docs/adding-a-css-modules-stylesheet
그리고 여기:
gatsbyjs.org/docs/css-modules

예, 확장을 구성 가능하게 만들면 필요 이상으로 복잡해질 수 있습니다. 그러나 적어도 .module.css 상수 파일에 정의 할 수 있으며 원숭이 패치를 통해 변경하기 위해 여러 위치에서 하드 코딩되지 않았습니다.

여기서 귀하의 요점과 모순됩니다. .module.css 는 동일한 기능에 대해 create-react-app 및 gatsby에서 사용 중입니다. 그것은 확립 된 패턴입니다.

그러나 명명 규칙을 변경하는 것은 확립 된 패턴이 아니며 Next.js에서 허용 할 이유가 없습니다.

.module.css가 첫 번째 명명 규칙이라고 생각합니다. | Next.Js에 의해 부과 된 확장. 내가 틀렸다면 나를 고쳐주세요.

Next.js는 구성 옵션에 대한 규칙을 설정합니다. 예 :

• pages 디렉토리가 경로가 됨
• pages/api 는 API 경로 임
• .js .tsx .tsx

안녕하세요 @timneutkens

패턴은 CSS Modules CSS 파일을 JS 객체로 가져 오는 방법을 설정하는 방법에 있습니다. 문제의 CSS 이름은 한계가 있습니다. 그런 점에서 Next.js는 새로운 구현에서 특정 패턴을 사용하지 않습니다.
Gatsby 및 CRA에서와 같은 CSS Modules 는 이전에 Next에서 이미 구현되었습니다 : https://github.com/zeit/next-plugins/tree/master/packages/next-css

CRA 및 Gatsby 사용자를 CSS Modules 와 혼동 할 수 있다는 사실을 알고 있더라도 사용 된 규칙 인 .module.css 의문을 제기하지 않습니다. 적절한 이름을 선택하는 것은 어렵고 모든 사람이 항상 행복하지는 않습니다.

.m.css 규칙이 더 짧고 (확장에 더 적합 함) 중복이 적기 때문에 (import 문이 모듈을 가져 오는 데 사용됨) 더 좋다고 생각하지만이 점을 고려해 주시기 바랍니다. 일반적으로 규칙을 정의하고 상수 파일에서 특정 .module.css 를 정의하면 패치를 적용 할 수 있습니다.

어쨌든 CSS 모듈에 많은 축하를 보냅니다. 당신은 굉장한 일을했습니다. 그것은 "거의"불가능한 일처럼 보였습니다.

명명 규칙에 2 센트를 추가 할 수 있다면 컴파일을 위해 PostCSS가 필요하고이 명명 규칙을 사용하기로 결정했기 때문에 .pcss 확장을 사용하는 구성 요소 라이브러리가 있으며 이러한 CSS를 모듈로 가져와야합니다. . 이 사건을 어떻게 해결 하시겠습니까? 우리는 현재 웹팩 구성을 해킹하고 로더의 테스트 정규식을 패치하고 있지만 상상할 수 있듯이 더럽게 느껴집니다.

나는 .module.css 현재 글로벌 .css와 마찬가지로 postCSS를 지원한다고 상상합니다.

무슨 일이 일어나는지 알아요, 휴가가 필요한 것 같아요.

PR을 검토 할 때 : https://github.com/zeit/next.js/pull/9686 나는 CSS 모듈이 전역 모듈을 가져 오는 것처럼 범위가 지정된 것으로 "보았다"고 생각했습니다.

이 코드를 읽었다 고 진심으로 생각했습니다.

index.module.css

.redText {
  color: net;
}

import './index.module.css'

export default function Home () {
  return (
    <div id = "verify-red" className = "redText">
      This text should be red.
    </div>
  )
}

분명히 현실과는 관계가 없습니다. 실제로 실제 코드는 이것입니다.

import {redText} from './index.module.css'

export default function Home () {
  return (
    <div id = "verify-red" className = {redText}>
      This text should be red.
    </div>
  )
}

CRA 또는 Gatsby에서와 같이 CSS 모듈 만 있습니다. 따라서 혼란, 내 혼란.

실수에 대해 모두에게 사과드립니다.

:-(

CSS 모듈을 사용할 때의 주요 문제는 다음과 같습니다.

내 프로젝트에서 CSS 모듈을 사용하고 일부 타사 구성 요소도 CSS 모듈을 사용합니다.
하지만 ... 일부 타사 구성 요소는 전역 CSS를 사용합니다.

.module.css 확장 솔루션은 이해하고 구현하기 쉽다고 생각합니다.
그리고 다른 프레임 워크 (CRA, Gatsby)는 합의에 도달했습니다.

지금까지 확장 솔루션에 대한 문제가 발생하지 않았습니다.
그래서 저는 .module.css 확장의 개발을 촉진하기를 바랍니다.

CSS 모듈 문제에 대한 또 다른 해결책이 있다면 더 좋습니다.

뿡뿡
.m.css 이 더 짧지 만 더 낫다고 생각하지 않습니다.
min.css 또는 module.css 입니까?

@ xyy94813 또는 그 반대, 모든 CSS 가져 오기는 모듈이며 .global.scss 가있는 파일은 전역 파일입니다.

뿡뿡
그러나 게시 된 구성 요소에는 비우호적입니다.

나는 규칙이 좋은 기본이라고 생각하지만 전달됩니다 예를 들어, CSS 모듈에 특정한 결국 사용할 수해야 할 몇 가지 구성 옵션, 그 css-loader 일부 사용자는 "범위"어떻게 제어를 원할 것 같이, 클래스 이름이 출력됩니다. "모듈"로로드되는 CSS 파일을 결정하는 정규식을 제공하는 옵션을 추가 할 수 있습니다.

일부 사용자는 "범위가 지정된"클래스 이름이 출력되는 방식을 제어하기를 원할 것입니다.

당신이 그것을 원하는 이유의 예? 나는 아무것도 생각할 수 없다.

왜 당신이 그것을 원하는지 예? 나는 아무것도 생각할 수 없다.

@timneutkens 글쎄, 나는 기본적으로 내 전역 클래스의 이름 지정 패턴을 따르는 이름 지정 패턴을 출력하는 것을 선호 할 수 있습니다.
이 외에도 특정 네임 스페이스를 화이트리스트에 추가하려는 경우 빌드 후 제거 또는 분할 또는로드 시나리오를 생각하고 있었지만 아직 해결하지 못했습니다.

초기 설정을 제거하고 균일 성을 강화하기 위해 독자적인 프레임 워크가 결정을 내릴 수 있다는 것을 기억하는 것이 중요하다고 생각합니다.

이러한 결정 중 일부는 구성 옵션 또는 확장을 통해 변경할 수있는 기본값과 함께 제공되어야하지만 사용자 지정 가능한 모든 항목을 사용하면 코드베이스를 늘려서 테스트, 유지 관리 및 문서화해야하는 코드를 더 많이 만듭니다.

범위가 지정된 출력 해시 패턴과 같은 것은 기본값을 덮어 쓸 필요가있는 지점에 도달하면 너무 세분화되어 필요한 사용자 지정 로더를 작성해야하는 지점에있을 가능성이 높습니다.

새로운 React 개발자와 작업 할 때 항상 className을 통해 구성 요소에 범위 지정 스타일의 개념을 전달하는 것이 훨씬 쉽다는 것을 알았습니다. 구성 요소의 외부 요소에 일반적으로 구성 요소 이름과 동일한 고유 한 className을 지정하고 SCSS를 사용하는 경우 다음과 같이 스타일을 작성합니다.

.Navbar {
  .logo { ... }
  .nav-item { ... }
}

분명히 css-modules 의 이점을 알고 있지만 더 이상 위의 메서드를 지원하지 않으면 Next.js가 새로운 개발자에게 덜 친숙해 질까 봐 걱정됩니다. 많은 사람들이 CSS 주문 문제를 겪고 있다면 그것은 좋은 절충안일지도 모르지만, css-modules 시행이 적어도 next.config.js 를 통해 비활성화 될 수 있는지 궁금합니다. 또는 기술적으로 얼마나 가능한지 확실하지 않지만 모든 스타일이 고유 한 className으로 적절하게 범위가 지정되었는지 확인하는 빌드 타임 검사를 할 수도 있습니다.

위의 방법을 더 이상 지원하지 않으면 Next.js가 새로운 개발자에게 덜 친숙해 질까 걱정됩니다.

내가 뭔가를 오해하지 않는 한, 나는 CSS 모듈이 배타적이라고 생각하지 않고, 가져 오는 파일에 *.module.css 이름 지정 패턴 또는 *.module.scss 가있는 경우에만 로더가 CSS 모듈의 파서를 적용합니다. 그 문제에 대한

@ lunelson-bl

CRA 또는 Gatsby가 명명 패턴 Next를 사용하는 경우에만 파서를 활성화하는 방식과는 반대로 반 배타적입니다. 비 모듈을 구성 요소 JS로 직접 가져 오는 것을 허용하지 않습니다.

RFC에서 :

/* components/button.js */
import { btnLarge } from './button.module.css'

// import '../styles.css'; // <-- this would be an error

모듈이 아닌 클래스를 사용하려면 _app.js 로만 가져 오는 스타일 시트를 전역 스타일 시트로 가져와야합니다 (분할하고 구성 요소 파일과 함께 배치하려는 경우). 그렇지 않으면 해당 글로벌 스타일 시트에 직접 배치해야합니다.

저는 next.js의 새로운 사용자입니다. 이 문제를 읽고 조금 혼란스러워합니다. next.js가 build-in-css-support를 지원 하므로 @ next-css 플러그인이 필요하지 않다고 생각하지만 작동하지 않고 "ModuleParseError"에 대한 오류가 발생합니다.
CSS 가져 오기 지원을 추가하기 위해 @ next-css 플러그인을 추가하면 작동하므로 @ next-css없이 어떻게 build-in-css-support가 예제를 제공 할 수 있습니까?
감사합니다 @all.

저는 next.js의 새로운 사용자입니다. 이 문제를 읽은 후 약간 혼란 스럽습니다. next.js는 build-css 지원을 지원하므로 @ next-css 플러그인이 필요하지 않지만 작동하지 않고 "ModuleParseError"에 대한 오류가 발생하지 않습니다.
CSS 가져 오기 지원을 추가하기 위해 @ next-css 플러그인에 추가하면 작동하므로 @ next-css없이 css-build를 어떻게 생성합니까? 예를 들어 줄 수 있습니까?
감사합니다 @ALL .

다음과 같이 next.config.js에 구성을 추가하십시오.

module.exports = {
  experimental: {
    css: true
  }
}

@erkanunluturk 감사합니다. 괜찮지 만 실험적인 기능 경고가 있습니다. 중요합니까?
그리고 antd와 어떻게 호환됩니까? 나는 개미 디자인 이 괜찮다는 것을 안다.

@Timer 가져 오기 Ant-design 사용 [RFC] CSS 지원 예제를 제공 할 수 있습니까? 감사.

다른 링크에있을 때 여전히 Router.push ( "/")에 문제가 있습니다. 누구든지 그것에 대한 해결책이 있습니까? 정말 감사합니다

: 경고 :이 스레드 사용을 중단하고 추적기를 발행하십시오. 이것은 RFC이며 아직 구현 중입니다.

팀의 마지막 의미있는 의견은 https://github.com/zeit/next.js/issues/8626#issuecomment -531415968 https://github.com/zeit/next 를 통해 활성화하여 현재 구현을 평가할 수 있습니다.

작업을 추적 할 가능성이 없습니다. 어떻게 도와 드릴까요? @Timer 이 RFC를 로드맵 인 마일스톤과 연결할 수 있습니까? RFC의 포인트에서 수행되는 작업은 무엇입니까?

잘 모르겠습니다. 추적하는 방법은 다음과 같습니다.

@StarpTech 이 RFC는 완전히 구현되었습니다. 전역 CSS 및 CSS 모듈은 RFC 설명에 따라 작동합니다.

하나의 실험 플래그로 둘 다 테스트 할 수 있습니다!

추가 알림 확산을 방지하기 위해이 스레드를 잠그겠습니다. 누군가 문제를 발견하면 새 문제를 열고 알려주십시오! 지원이 공식적으로 안정된 것으로 표시되고 기본적으로 켜져있는 경우 여기에 게시합니다.

9.2 출시 : https://nextjs.org/blog/next-9-2