이와 같은 CSS 규칙을 의미합니까?

html,
body {
  ...
}

예.

지금 해당 CSS 규칙을 가져오지 않는 것은 불가능합니다.

https://github.com/ant-design/ant-design/issues/1966#issuecomment -247946641

이제 이러한 전역 스타일을 재정의해야 합니다.

또는 babel-plugin-import 의 style 옵션을 삭제하고 더 적은 수의 파일을 독립적으로 가져옵니다.

<strong i="12">@import</strong> "~antd/lib/style/themes/default.less";
<strong i="13">@import</strong> "~antd/lib/button/style/index.less";

그래도 끔찍한 디자인입니다.

이 문제는 이 라이브러리를 작업하기 매우 어렵게 만듭니다. 특히 body 등에 대한 전역 속성이 있습니다. 이 문제를 변경할 계획이 없는 한 이 문제를 훨씬 더 명확하게 해야 한다고 생각합니다.

@Forestdev @peitalin 알려진 문제이지만 이 문제를 해결할 시간이 충분하지 않습니다.

하지만 여기서 계속 논의할 수 있습니다.

주요 변경 사항을 가져올 수 있다면 이 문제를 해결할 수 있습니다. 예를 들어 구성 요소의 스타일로 재설정할 때 스타일을 이동합니다.

이동하다:

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

에게:

.ant-btn,
.ant-btn * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

그리고 이전 버전과의 호환성을 위해 독립형 재설정 스타일시트를 제공할 수 있습니다.

import 'antd/styles/reset.less'

이것에 대한 업데이트가 있습니까?

논의할 수는 있지만 솔루션을 찾을 수 있는 경우 지금 적용할 시간이 없습니다.

많은 사람들이 글로벌 CSS를 가져오고 기존 스타일을 재정의할 여유가 없기 때문에 이것이 중요한 문제라고 생각합니다.

그것은 내가 Antd를 채택하는 것을 막는 정말 성가신 일입니다.

이것은 많은 개발자를 차단합니다#

ant는 bootstarp와 호환되지 않기 때문에 ant 사용을 포기해야 했습니다.

적은 수의 파일을 독립 라이브러리에 넣는 것은 어떻습니까?

btw. 나는 노력하고있다

관련 토론: https://github.com/palantir/blueprint/issues/244

안녕하세요, 저는 [email protected] 에서 작업 중이며 글로벌 스타일 문제에 대한 솔루션을 찾으려고 합니다.

@benjycui에서 import 'antd/styles/reset.less' 의 솔루션을 시도했습니다. 특히 babel-plugin-import를 사용하면 중단 변경이 되고 스타일 가져오기가 훨씬 더 복잡해집니다. 그래서 패스하기로 합니다.

그런 다음 이 문제의 요점은 babel-plugin-import 에 관한 것으로 코드를 다음과 같이 변환합니다.

import Button from 'antd/lib/button';
import 'antd/lib/button/style/css';   // It will import reset styles and hard to override it because it was imported lately!!!

이에 대한 더 나은 해결 방법은 babel-plugin-import style 옵션을 사용하지 않고 수동으로 스타일을 가져오는 것입니다.

<strong i="17">@import</strong> '~antd/dist/antd.css';

// your global styles
body {
 ...
}

그래서 나는 전체 reset.less 아이디어를 포기하고 다음과 같은 성가신 재설정 코드를 제거합니다. https://github.com/ant-design/ant-design/blob/afce275d25abe958b32cf15ba1f16c49f4fca900/components/style/core/base. 적은#L33 -L50

또한 #6162를 해결하기 위해 bootstrap@v4 에서 더 나은 타이포그래피 코드를 추가했습니다.

모든 업데이트는 현재 #7682에 있으며 곧 antd-3.0에 병합됩니다.

import 'antd/styles/reset.less 를 import 'antd/styles/typography.less 로 변경하십시오.

사용자가 [email protected] 에서 업그레이드할 때 import 'antd/styles/typography.less 는 마이그레이션을 쉽게 만드는 어댑터입니다.

antd를 처음 접하는 사용자의 경우 import 'antd/styles/typography.less 는 선택적 기능이므로 충돌에 대해 걱정할 필요가 없습니다.

antd/style/v2-compatible-reset.less 을(를) 추가했습니다.

+// For 2.x reset compatibility
+//   import 'antd/style/v2-compatible-reset';
+//     or
+//   <strong i="7">@import</strong> '~antd/style/v2-compatible-reset.css';

이 문제가 현재 종료되었으므로 누군가 이 문제를 해결하기 위한 몇 가지 단계를 설명해 주시겠습니까? 크롬 확장의 콘텐츠 스크립트에서 antd를 사용하려고 하는데 모든 웹페이지가 엉망입니다.

@abhinavzspace antd@next 를 설치하여 3.0 Alpha 빌드를 얻을 수 있습니다. 이렇게 하면 이 문제가 어느 정도 해결되지만 완전히는 아닙니다.

많은 시간이 지난 후 저에게 맞는 솔루션을 찾았습니다. 다른 분들에게는 효과가 있을지도...

문제는 각 구성 요소가 style/core/base.less 에서 많은 전역 재설정 및 재정의(normalize.css 포함)를 가져옵니다. 이 스타일이 비동기식으로 로드되면 모든 것을 엉망으로 만드는 페이지 스타일을 재정의합니다.

추가하는 것을 발견했습니다.

import 'antd/lib/style/index.css'
// import 'antd/lib/style'  if you are using LESS

내 프로젝트의 진입점으로 설정하면 웹팩 팩이 다른 모든 스타일보다 먼저 재설정되므로 비동기 구성 요소가 로드될 때 재설정을 다시 가져오거나 포함하지 않습니다.

각 구성 요소에 대해 다른 index.less를 제공해야 합니까? index.less를 제어할 수 있습니다. 또한 거의 모든 파일이 @import 지시문을 제거하거나 @import (참조)를 사용합니다.

좋은 해결책이 될까요?

큭큭큭큭큭큭큭큭큭 모든 사람이 이것이 알려진 문제임을 알 수 있도록 이 문제는 "공개" 상태여야 합니다. 이것을 위해 프로젝트 중간에 antd를 버렸습니다.

이것은 진짜 부끄러운 일입니다. Ant가 나에게 추천되었고 유망해 보이지만 이 동작은 기존 디자인을 엉망으로 만들고 Ant가 Bootstrap처럼 느껴지게 만듭니다. 😦

Ant는 자체 구성 요소의 모양에 대해 의견을 제시해야 하지만 사용자 사이트의 모양에 대해서는 의견을 제시해서는 안 됩니다.

이 문제는 Ant 3가 이 문제를 수정함을 의미합니다. 하지만 저는 여전히 많은 글로벌 스타일을 보고 있습니다. 이러한 전역 스타일을 추가하지 않으려면 사용자는 어떻게 해야 합니까?

@openjck 나는 이것이 전역 스타일을 재설정하는 것처럼 보인다는 것을 발견했습니다(내 React 진입점에 추가했습니다).

import 'antd/lib/style/v2-compatible-reset';

그들의 변경 로그 에 묻혀 있는 것을 발견했습니다.

나는 그 메모를 찾았지만 그것은 나를 위해 작동하지 않았습니다. 문서가 매우 희박합니다. 다른 스타일 관련 수입품은 무엇이며 어떤 순서로 하였습니까?

Ant 스타일에 관한 한 그게 전부입니다. 나도 style: true 설정을 사용하고 있는데 이는 중요할 수 있습니다.

어떤 글로벌 스타일의 변화가 보이나요?

나는 webpacker 및 rails와 함께 React를 사용하고 있으며 이전에도 같은 문제가 있었습니다. 이를 해결하기 위해 HTML 보기에서 stylesheet_pack_tag 아래에 기존 CSS 파일 이름의 스타일시트 링크 태그를 추가하면 작동합니다.
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'

@jhdavids8 , style: true 을 어디에 설정하고 있습니까? 그것이 내 설정에 적용되는지 확실하지 않습니다.

나는 create-react-app을 사용하고 있습니다. 문서 에서는 기본 스타일시트 중 하나에 이것을 추가할 것을 권장합니다.

<strong i="10">@import</strong> '~antd/dist/antd.css';

...하지만 그렇게 하면 본문에 설정된 글꼴 모음 및 줄 높이와 같은 전역 스타일 변경이 도입됩니다.

요청 시 스타일을 가져오기 위해 여기 에 설명된 대로 babel-plugin-import 를 사용하고 있습니다. style: true 옵션은 Sass 소스 파일을 가져오는 방법입니다( 참조 ). Ant 테마도 크게 사용자 정의할 때 필요합니다.

우리 팀은 글로벌 스타일 때문에 antd를 포기했습니다 😭 . 바쁘시겠지만 이 문제를 해결할 수 있는 방법을 찾으면 antd의 범위가 급격히 늘어날 것입니다.

이 문제를 다시 여십시오. 나는 여전히이 행동을보고 있으며 다른 사람들도 마찬가지입니다.

+1

+1

내가 추가한 전역 css는 매번 /lib/style/index.css 중간에 패키징될 것입니다. 저는 그냥 antd를 제거하고 싶습니다.
IE 10-에서 올바른 디스플레이를 추가하십시오.
뒤
HTML,
몸 {
너비: 100%;
높이: 100%;
}
왜 그렇게 어려운지... 사용자 정의 전역 CSS를 /lib/style/index.css 끝에 배치할 수 없는 이유

+1

+1

@afc163이 설명한 방식으로 문제를 해결할 수 있다는 것을 알았습니다.

일반적으로 import 'antd/lib/tabs/style/css'; 하면 다음이 포함된 파일을 가리킵니다.

'use strict';
require('../../style/index.css');
require('./index.css');

Tabs CSS를 가져오고 싶었으므로 이것을 구성 요소 파일에 추가했습니다.

import 'antd/lib/tabs/style/index.css';

그리고 페이지의 나머지 부분에 영향을 주지 않고 탭 구성 요소의 스타일을 적절하게 지정하는 것으로 나타났습니다.

그러나 첫 번째 스타일이 이유가 있기 때문에 주의하십시오. 일부 antd 구성 요소는 다른 구성 요소보다 더 많이 의존하고 모든 경우에 작동하지 않을 수 있습니다.

_아직 제거하지 않았다면 .babelrc 플러그인에서 style 속성을 제거해야 합니다.
[ "import", { "libraryName": "antd" } ] _

그것이 누군가를 돕기를 바랍니다!

이것은 정말 미친 짓입니다. 전역 스타일을 방해하는 "모듈식" 구성 요소 라이브러리입니다. 이 라이브러리가 왜 그렇게 높은 평가를 받았는지, 근본적인 문제가 잘못된 것인지 모르겠습니다. 문제가 해결된 것처럼 이 티켓을 닫았다는 것은 말할 것도 없습니다.

@strongui babel-plugin-import가 작동하지 않습니까?

@abenhamdine 아니요. 그리고 위의 의견으로 판단하는 것은 나 혼자가 아닙니다.

최신 버전의 라이브러리를 사용하면 여전히 이 문제가 발생합니다.

누구든지 수정 사항을 찾았습니까(이상적으로는 재설정이 아님)?

필요한 더 작은 구성 요소에 대한 정확한 CSS를 가져오는 데 성공했습니다.

import 'antd/lib/checkbox/style/index.css'

하지만 이제 테이블을 구현하려고 합니다. Table은 많은 스타일에 의존하므로 다양한 CSS 시트를 모두 별도로 가져와야 했습니다. _제외_ 정렬 기능을 위해서는 antd/lib/icon 내에 존재하지 않는 icon CSS가 필요합니다. 대신 아이콘 CSS가 리디렉션되기 때문에 기본 스타일 시트를 가져와야 했습니다.

import 'antd/lib/style/index.css'

이것은 내 앱의 나머지 부분에 영향을 미치는 파일입니다 ☝️

최소한 CSS 시트가 기본 시트로 리디렉션되지 않도록 만들 수 있습니까? (테이블 정렬에 필요한 icon 같은?)

또한 @afc163 이 문제를 다시 여십시오. 아직 해결되지 않았습니다.

스레드를 읽고 "WON'T FIX" 태그를 확인하세요. 이것은 Ant.D를 구성 요소 라이브러리로 선택하는 임베디드 구성 요소인 모든 대형 애플리케이션을 차단하는 P0 버그입니다. 태그는 'HEART BREAKING'이어야 합니다.

@afc163 이게 도대체 왜 안 고쳐지는 걸까요?? 반응 철학과 모듈식 디자인의 핵심은 구성 요소가 다른 구성 요소로 번지지 않도록 하는 것입니다. 이것은 전혀 말이 되지 않습니다. 나는 시간을 보내고 트리 선택에 대한 CSS를 추출했으며 다른 것에 영향을 미치지 않고 작동하도록 할 수 있었기 때문에 가능하다는 것을 알고 있습니다.

이 문제를 다시 열면 +1입니다. Material-UI에서 AntD로 앱을 전환하려고 하는데 이것이 진입 장벽이 됩니다.

재개봉 +1. babel-plugin-import 은(는) 작동하지 않습니다. 모든 tuts와 지침을 시도했습니다. 내 앱의 전체 글꼴을 변경할 수 없습니다 😱

blueprintjs palantir/blueprint#244 에 관련 문제가 있었습니다.

한 가지 제안은 css-byebye라는 postcss 플러그인을 사용하는 것입니다.
https://github.com/AoDev/css-byebye

이것은 임시 해결책으로 도움이 될 수 있습니다.

훌륭한 라이브러리이지만 사용자를 대하는 끔찍한 방법입니다. 기본 글꼴을 변경해야 하는 이유는 무엇입니까? 그리고 글꼴과 스타일을 재설정할 방법이 없는 이유는 무엇입니까?

이것은 우리와 댓글을 읽고 판단하는 많은 사람들이 이 라이브러리를 사용하지 못하게 합니다.

이것이 언어/문화적 문제인지는 모르겠지만 이 라이브러리의 개발자 - 참고: 아무도 사용하고 싶지 않은 라이브러리를 만드는 의미가 무엇입니까? 동료 개발자가 라이브러리를 사용하기 어렵게 만드는 이유는 무엇입니까?

아무도 사용하고 싶지 않은 라이브러리를 만드는 의미는 무엇입니까? 동료 개발자가 라이브러리를 사용하기 어렵게 만드는 이유는 무엇입니까?

적당히 해주세요.
많은 개발자와 스타트업이 이 라이브러리를 사용하거나 사용하려고 합니다.

이 라이브러리는 오픈 소스이며 무료입니다. 사용하기 싫으면 사용하지 마세요.
그것을 수정하고 싶다면 그것을 포크하거나 PR을 제출할 수 있습니다. ant-design의 유지 보수는 기여에 열려 있습니다.

그러니 여기서 욕할 필요가 없습니다.

이 문제는 또한 우리 팀의 거래 차단기이기도 합니다.
우리는 프로젝트와 완료된 모든 작업을 사랑하지만 이 단일 문제로 인해 사용할 수 없습니다.

그렇기 때문에 가까운 시일 내에 문제가 다시 해결되기를 바라며 이 문제를 계속 추적하고 있습니다.

아, 나는 매우 온건하다. 그리고 저는 여기서 욕을 하는 것이 아닙니다.

나는 당신의 라이브러리가 비록 훌륭하더라도 불필요한 부작용이 있어서는 안 된다는 점에 주의를 기울이고 있습니다. 예를 들어 MomentJS를 사용하고 Klingon에서 날짜와 시간을 표시하기 시작한다고 상상해 보십시오!

"스스로 갈래"도 답이 아닙니다. 사실 이것이 많은 오픈 소스 프로젝트의 슬프고 한심한 상태입니다.

우리는 복잡한 시스템을 스스로 구축하고 있습니다. 우리는 여기에서 신인이 아닙니다. 우리는 도서관을 이용하고 우리의 삶을 계속하고 싶습니다. 최소한 기본 글꼴이나 글꼴 크기를 변경하지 않도록 라이브러리에 요청하는 방법이 있어야 합니다. 그것이 나와 여기 있는 다른 사람들이 묻는 전부입니다.

귀머거리가 되기로 선택하고 이러한 문제를 무시하도록 선택할 수 있습니다. 내 말 대신 집중하기로 선택하거나 여기 사람들이 말하는 내용을 이해하고 부작용 없이 라이브러리를 사용할 수 있는 방법을 제공하도록 선택할 수 있습니다.

당신이 오래 살고 번영하는 동안 힘이 당신과 함께하기를 바랍니다.

@kotpal 에 더 동의할 수 없습니다. 이 토론이 "이 기능을 추가할 수 있습니까?" 또는 "...이면 좋지 않을까요?"에 관한 것이 아니라 문자 그대로 구성 요소가 글로벌 기능을 엉망으로 만들어서는 안 된다는 것을 작성자에게 확신시키려는 것이 놀랍습니다. 상태. 말 그대로 ReactJS와 모든 모듈식 디자인의 핵심 개념을 공백으로 두고 있습니다.

글로벌 테마 또는 무언가를 제공하지 않는 한 GLOBAL을 엉망으로 만들지 마십시오.

@abenhamdine 의 말을 이해합니다. 하지만 @strongui 에도 동의합니다.

아마도 Ant는 전체 경험이어야 합니다. 그러나 실제로 많은 사람들은 여전히 ​​변경할 수 없는 레거시 코드로 작업해야 합니다. 그리고 이 프로젝트가 이전 코드와 충돌하면 애초에 React(또는 이와 유사한 다른 프레임워크)를 사용할 때의 모든 이점을 잃게 됩니다.

이 문제가 너무 많은 사람들이 프로젝트를 완전히 채택하는 것을 막는다면 우리가 함께 모여 현상금을 걸 수 있습니까?

나는 스스로 이 문제를 고칠 지식이나 시간이 없다는 것을 알고 있는데, 기여자들이 그것을 고칠 때까지 걸리는 시간은 무엇입니까? (예, 기능이 아니라 문제입니다)

나는 antd에서 제공하는 전역 CSS를 재정의하고 스타일이 지정된 jsx와 같은 프로젝트를 사용하여 어느 정도 성공했습니다.
여기에서 배포된 사이트를 볼 수 있습니다! 추신: 작업이 진행 중입니다.

나는 방금 같은 상황에 처해 있으며 @inverts 및 @corinnebrady (https://github.com/ant-design/ant-design/issues/4331#issuecomment)가 설명한 것과 동일한 접근 방식을 사용하여 적당한 성공을 거두고 있습니다. -361421192 및 https://github.com/ant-design/ant-design/issues/4331#issuecomment-365481037). 따라서 일부 구성 요소는 다음과 같습니다.

// ...
import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/index.css'

import AutoComplete from 'antd/lib/auto-complete'
import 'antd/lib/auto-complete/style/index.css'

import Form from 'antd/lib/form'
import 'antd/lib/form/style/index.css'
import 'antd/lib/select/style/index.css'

import Button from 'antd/lib/button'
import 'antd/lib/button/style/index.css'
// ... etc

이것은 대부분의 antd 구성 요소에서 어느 정도 정상적으로 작동하지만 특정 CSS 파일과 연결되지 않은 다른 구성 요소가 있으며 해당 스타일은 전역 구성 요소에서만 찾을 수 있습니다. icon 구성 요소가 작동하도록 하려면 전역 파일에서 내 스타일시트로 모든 아이콘 관련 스타일을 수동으로 복사해야 했습니다. 유지 관리자: antd/lib/icon/style/index.css 를 포함하는 PR을 수락하시겠습니까?

import 'antd/lib/spin/style/index.less' 와 같이 개별 파일도 적게 포함할 수 있는 것 같습니다.

이 문제를 공식적으로 해결할 계획이 있습니까?

여전히 문제지만 @reyronald 와 같은 참조 가져오기로 수정하려고 합니다.

나도 Icon 의 스타일 문제에 갇혀 있습니다.

@reyronald 홍보 부탁드려도 될까요?

이것으로 고통받는 사람들은 저장소에서 직접 패키지를 추가하여 내 포크를 시도하고 싶어할 것입니다.

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

또는

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

base.less만 제외하고 다른 수정 없이 빌드했습니다. 제 경우에는 작동하며 많은 구성 요소를 사용하지 않습니다. 특히 프로젝트에 제대로 재설정된 스타일시트가 없는 경우 특히 일부 구성요소의 모양이 깨질 것입니다. #4546

안녕하세요 @afc163 저도 여기 들어가서 이 문제를 수정하기 위해 음성을 추가하고 싶습니다. 우리는 많은 대상으로 대규모 애플리케이션을 구축하고 일부 대상은 타사 사이트에 로드됩니다. antd 글로벌 CSS를 방해하는 것은 우리에게 문제가 됩니다. 왜냐하면 우리는 결국 해당 타사 사이트의 CSS 재설정 및 글꼴을 날려버리기 때문입니다. 우리는 라이브러리를 사랑하고 유지 관리자가 우리에게 방향을 알려준다면 수정에 기여하고 싶습니다. 다시 열거나 대화를 다른 미해결 문제로 안내하세요! 감사 해요

그래서 우리는 웹팩 조작을 사용하여 대체 덜 파일을 로드함으로써 (적어도 지금까지는) 이 작업을 수행할 수 있었습니다.

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

src/style.less 파일은 index.less 파일과 동일한 파일을 로드하지만 최상위 선택기 범위 내에서 로드합니다.

#root { <strong i="11">@import</strong> '~antd/lib/style/core/index.less'; <strong i="12">@import</strong> '~antd/lib/style/themes/default.less'; }

결과는 모든 "전역" 스타일이 #root 범위로 적용된다는 것입니다.

`#루트 기사,

뿌리를 제쳐두고,

루트 대화 상자,

루트 그림 캡션,

루트 그림,

루트 바닥글,

루트 헤더,

루트 hgroup,

루트 메인,

루트 탐색,

루트 섹션 {

디스플레이: 블록;
}
`
등...

이것이 누군가에게 도움이되기를 바랍니다.

여러분, 정말 짜증납니다. 이 스타일 동작은 세계적 수준의 UI 라이브러리에서 기대할 수 없는 것입니다.

사람들이 혼동하지 않도록 최소한 문서에서 전역 재설정에 대해 언급하십시오. 또는 개별 스타일 및 아이콘 가져오기에 대한 레시피가 포함된 "레거시 웹 사이트에 통합" 가이드가 도움이 될 것입니다.

나는 이 문제가 닫힌 후 유지 관리자가 토론에 참여하지 않았기 때문에 이 문제의 구독을 취소했다고 생각합니다. 따라서 새 문제를 열거나 직접 ping하거나 PR을 열지 않는 한 이에 대한 공식적인 지원을 받지 못할 것입니다.

마침내 모든 규칙에 사용자 정의 클래스가 접두어로 붙은 원본 antd.css를 기반으로 새 CSS 파일을 생성하여 이 문제를 우회하는 방법을 찾았습니다. 내 솔루션은 PostCSS, Gulp 및 postcss-prefixwrap 플러그인을 사용합니다.

https://gist.github.com/sbusch/a90eafaf5a5b61c6d6172da6ff76ddaa

완벽하지는 않지만 놀랍게도 잘 작동합니다. 적어도 내 필요에는 ;-)

요지는 .antd-ns 접두사가 붙은 antd CSS의 기성품 버전도 포함합니다("네임스페이스"의 약자로 "ns").

노트:
나에게 중요한 요구 사항은 자동화되어 모든 새로운 ant 릴리스에 대해 접두사가 붙은 CSS를 쉽게 생성할 수 있다는 것입니다.

• 접두사가 붙은 CSS를 만들기 위한 도구로 사용됩니다. 따라서 프로젝트와 분리된 다른 폴더에서 실행할 수 있습니다. antd 기반 프로젝트에 PostCSS 또는 Gulp를 포함할 필요가 없습니다! 결과 CSS는 프로젝트의 정적 CSS 폴더에 배치되기만 하면 됩니다(이는 적절하게 구성된 경우 Gulp에서 수행).
• postcss-prefixwrap 는 antd 키프레임 애니메이션을 유지하기 위한 내 패치가 포함된 버전 1.3.0 이상이어야 합니다.

댓글/피드백은 항상 감사합니다!

훌륭한 PostCSS postcss-prefixwrap 플러그인으로 이것을 가능하게 해준 @dbtedman 에게 감사드립니다.

댓글/피드백 감사합니다!

마침내 모든 규칙에 사용자 정의 클래스가 접두어로 붙은 원본 antd.css를 기반으로 새 CSS 파일을 생성하여 이 문제를 우회하는 방법을 찾았습니다.

이것은 IMHO의 가장 확실한 솔루션입니다.
개인적으로 현재로서는 이것이 필요하지 않지만 누군가가 더 적은 파일의 각 CSS 규칙 앞에 클래스 이름이 적은 변수(예: .@{scope} )를 추가하기 위해 PR을 제출하면 모든 사람에게 유익할 것입니다.

기본적으로 이 변수는 현재 동작이 중단되는 것을 방지하기 위해 비어 있습니다.

예를 들어 스타일을 분리하려면 antd 로 변수를 설정하기만 하면 됩니다.

나는 이 솔루션이 유지 보수자들에게 받아들여질 수 있고 앞으로 나아갈 수 있을 것이라고 생각합니다.

다음은 나를 위해 일한 해결 방법입니다. styles.less 파일을 만들었습니다.

// Doing what antd/lib/style/core/index.less does
// but without loading "base" which overwrites global styles
<strong i="7">@import</strong> '~antd/lib/style/mixins/index.less';
<strong i="8">@import</strong> '~antd/lib/style/core/iconfont.less';
<strong i="9">@import</strong> '~antd/lib/style/core/motion.less';

<strong i="10">@import</strong> '~antd/lib/menu/style/index.less';
<strong i="11">@import</strong> '~antd/lib/dropdown/style/index.less';
<strong i="12">@import</strong> '~antd/lib/button/style/index.less';
<strong i="13">@import</strong> '~antd/lib/checkbox/style/index.less';
<strong i="14">@import</strong> '~antd/lib/grid/style/index.less';

.babelrc 에 다음이 있습니다.

  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": false,
      }
    ]
  ]

https://ant.design/docs/react/getting-started#Import -on-Demand 및 https://github.com/ant-design/babel-plugin-import 에 설명된 대로 JS 빌드 크기 최적화

맞춤형 스타일링을 위해 웹팩 구성을 다음과 같이 변경했습니다.

module: {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader'
    }, {
      loader: 'css-loader'
    }, {
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
        modifyVars: {"primary-color": "#ed1c24"},
      }
    }]
  }]
}

https://ant.design/docs/react/customize-theme#1)-Using-theme-property-(recommended-way)에 설명된 대로

BTW: 처리에서 이 "base.less" 파일을 무시하기 위해 new webpack.IgnorePlugin(/style\/core\/base/) 를 사용하려고 시도했지만 작동하지 못했습니다. 이유를 모르겠습니다. 내 가설은 Webpack으로 직접 처리하지 않고 LESS로 처리하기 때문입니다.

그 가치를 위해 antd.css를 수동으로 편집했으며 내가 사용하는 antd 구성 요소를 손상시키지 않고 원치 않는 스타일을 제거할 수 있었습니다.

@paneq 저도 현재 그렇게 하고 있습니다. babel-plugin-import 의 스타일 옵션은 스타일을 포함할지 여부를 결정할 수 있는 함수일 수도 있습니다. 나는 단지 그것을 작동하지 않았다. 그것을 디버깅해야 할 것입니다 ...
어쩌면 내가 그 옵션을 잘못 해석하고 있습니까?

@paneq 당신이 한 일을 복사했고 지금까지 작동하는 것 같지만 어떤 구성 요소에 해당 글로벌 CSS가 필요한지 확인하기에 충분한 구성 요소를 시도하지 않았습니다. 감사 해요

@vthinkxie

안녕하세요, .ant로 시작하는 모든 요소를 ​​일치시키고 스타일을 할당하는 것이 가능해야 합니다.

*[클래스^='개미-']{
상자 크기 조정: 테두리 상자;
-웹킷 탭 강조 표시 색상: rgba(0, 0, 0, 0); // 모바일 사파리의 탭 하이라이트 색상 제거
}

브라우저 간 호환성이 있어야 하며 구현하는 데 오랜 시간이 걸리지 않아야 합니다.

그래서 우리는 웹팩 조작을 사용하여 대체 덜 파일을 로드함으로써 (적어도 지금까지는) 이 작업을 수행할 수 있었습니다.

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

src/style.less 파일은 index.less 파일과 동일한 파일을 로드하지만 최상위 선택기 범위 내에서 로드합니다.

#root { <strong i="12">@import</strong> '~antd/lib/style/core/index.less'; <strong i="13">@import</strong> '~antd/lib/style/themes/default.less'; }

결과는 모든 "전역" 스타일이 #root 범위로 적용된다는 것입니다.

사용 중인 로더가 적은 버전은 무엇입니까? 3.0.0에서만 작동하는 것 같습니까? 보다. 예: https://github.com/webpack-contrib/less-loader/issues/184

또한 이 해결 방법에 어떤 버전의 antd를 사용하고 있었습니까? 내가 묻는 이유는 [email protected] 및 [email protected] 으로도 성공하지 못했기 때문입니다(webpack은 변경 후 해결하는 데 문제가 있었습니다). ..

이것이 누군가에게 도움이 되는지 모르겠지만 다음은 사용 중인 구성 요소에 대해서만 CSS를 가져오는 데 도움이 되었습니다.

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

이것이 누군가에게 도움이 되는지 모르겠지만 다음은 사용 중인 구성 요소에 대해서만 CSS를 가져오는 데 도움이 되었습니다.

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

예, 이것은 많은 구성 요소에서 제대로 작동하는 것 같습니다. 귀하의 마일리지는 다를 수 있지만 적어도 Select에는 구성 요소 고유의 스타일 이상이 필요합니다. 선택 항목의 "제거" 아이콘은 그렇지 않으면 렌더링되지 않습니다. 문제를 완전히 추적할 시간이 없었지만 아마도 사소한 문제일 것입니다. 따라서 일부 구성 요소의 기본 스타일에서 일부 스타일을 모방해야 할 수도 있습니다.

이 옵션이 완벽하지는 않지만 많은 구성 요소에서 잘 작동할 수 있습니다. 사용자 정의 스타일은 업데이트로 인해 중단될 위험이 있지만 업데이트를 수행하려는 시기를 분명히 제어할 수 있습니다.

내가 우리 조직을 위해 찾은 최고의 솔루션은 antd의 전체 CSS 시트를 포함하고 antd 이름이 지정되지 않은 스타일에 영향을 미치는 스타일은 제거하는 것입니다. 마일리지는 다를 수 있으며 현재 가져오는 _모든_ 스타일의 단점이 분명히 있습니다. 그러나 그것은 잘 작동하고 지금 약 두 달 동안 그렇게 한 후에 어떤 문제도 보지 못했습니다.

@jaleikas
이에 대한 해결 방법을 찾았습니까? 내가 말할 수 있는 한 [email protected] 의 문제는 여전히 해결되지 않았으므로 NormalModuleReplacementPlugin으로 제안된 수정 사항이 작동하지 않습니다. 그 솔루션은 수동으로 재정의하고 범위를 지정할 수 있기 때문에 실제로 가장 좋은 솔루션인 것 같습니다.
나는 당신과 같은 것을 시도하여 덜 로더를 다운 그레이드했지만 webpack 해결이 작동하지 않습니다.

여기에서 [email protected] 를 사용합니다.

이 문제로 고통받는 사람들은 저장소에서 직접 패키지를 추가하여 내 포크를 시도할 수 있습니다.

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

또는

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

베이스만 버리고 다른 수정 없이 지었습니다. 제 경우에는 작동하지만 많은 구성 요소를 사용하지 않습니다. 특히 프로젝트에 적절한 재설정 스타일 시트가 아직 없는 경우 일부 구성 요소의 영향을 받을 수 있습니다. #4546

이것은 나를 위해 작동합니다

이것으로 고통받는 사람들은 저장소에서 직접 패키지를 추가하여 내 포크를 시도하고 싶어할 것입니다.

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

또는

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

base.less만 제외하고 다른 수정 없이 빌드했습니다. 제 경우에는 작동하며 많은 구성 요소를 사용하지 않습니다. 특히 프로젝트에 제대로 재설정된 스타일시트가 없는 경우 특히 일부 구성요소의 모양이 깨질 것입니다. #4546

이 솔루션을 주셔서 감사합니다!

이에 대한 해결 방법을 찾았습니까? 내가 말할 수 있는 한 [email protected] 의 문제는 여전히 해결되지 않았으므로 NormalModuleReplacementPlugin으로 제안된 수정 사항이 작동하지 않습니다. 그 솔루션은 수동으로 재정의하고 범위를 지정할 수 있기 때문에 실제로 가장 좋은 솔루션인 것 같습니다.

나는 antd 사용을 중단하고 스타일이 지정되지 않은 구성 요소(예: rc-switch)를 선택하기로 결정했습니다. 문제는 대부분의 "스타일이 지정되지 않은" 구성 요소가 끔찍하거나 문서화되지 않았으며 일부는 다르게 동작하는 것처럼 보이므로 대부분 포기하고 다른 곳을 찾았습니다...

안녕하세요, .ant로 시작하는 모든 요소를 ​​일치시키고 스타일을 할당하는 것이 가능해야 합니다.

*[클래스^='개미-']{
상자 크기 조정: 테두리 상자;
-웹킷 탭 강조 표시 색상: rgba(0, 0, 0, 0); // 모바일 사파리의 탭 하이라이트 색상 제거
}

브라우저 간 호환성이 있어야 하며 구현하는 데 오랜 시간이 걸리지 않아야 합니다.

@tylik1 , 감사합니다! 나머지 전자 앱과 일치하도록 글꼴 모음을 수정해야 했습니다. 이것은 나를 완전히 구했습니다.

이것이 누군가에게 도움이 되는지 모르겠지만 다음은 사용 중인 구성 요소에 대해서만 CSS를 가져오는 데 도움이 되었습니다.

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

그것은 다음과 같이 나를 위해 일합니다.

import Icon from 'antd/lib/icon';
import 'antd/lib/icon/style/index.css';

불행히도 이것은 쇼 스토퍼입니다. 날짜 선택 도구가 지금까지 내가 찾을 수 있는 최고임에도 불구하고 Antd를 구현하지 않을 것입니다.

우리는 현재 우리 회사의 반응 구성 요소 라이브러리를 찾고 있으며 이것은 우리에게도 차단 문제이며 아마도 그 때문에 ant를 사용하지 않을 것입니다.

우리는 또한 훌륭한 테마 옵션이 있는 react MUI를 살펴보고 있습니다. 아마도 그들이 어떻게 하고 비슷한 것을 구현하는지 볼 수 있을 것입니다.

나는 https://www.npmjs.com/package/patch-package 를 사용하여 주석을 달았습니다.

// import 'normalize.css/normalize.css';

antd-mobile/es/style/index.js 부터
제 목적은 next.js 를 빌드하는 것이었습니다. 그래서 제 경우에는 헤더에 CND 링크를 대신 포함시켰습니다.

2020년, 인류는 죽고, 코로나바이러스, 개미 디자인은 프로젝트에 글로벌 스타일을 추가했습니다...

#9363에서 추적