Ant-design: 컴파일 경고: 청크 스타일 [mini-css-extract-plugin] 충돌하는 순서...

에 만든 2019년 02월 18일 · 35코멘트 · 출처: ant-design/ant-design

이 경고는 온라인 환경에서 재현할 수 없으므로 직접 제출합니다.

문제

Next.js 프로젝트에서 Ant Design을 사용하고 있습니다. babel-plugin-import 를 사용하여 요청 시 antd 구성 요소를 로드합니다. 첫 페이지를 보여도 괜찮지만 다른 페이지로 넘어가면 다음과 같은 경고가 나옵니다.

chunk styles [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-2!./node_modules/less-loader/dist/cjs.js??ref--5-3!./node_modules/antd/lib/button/style/index.less
 * css ./node_modules/css-loader??ref--5-2!./node_modules/less-loader/dist/cjs.js??ref--5-3!./node_modules/antd/lib/dropdown/style/index.less

그리고 페이지의 스타일이 올바르지 않아 새로 고침 후 정상이 되었습니다.

또한 프로젝트를 빌드할 때 다음과 같은 경고를 받았습니다.

➜  web git:(master) ✗ npm run build

> [email protected] build /Users/jagger/projects/jwpay/web
> next build


✔ Client
  Compiled successfully in 12.77s

✔ Server
  Compiled successfully in 8.64s

> Using external babel configuration
> Location: "/Users/jagger/projects/jwpay/web/.babelrc"
> Emitted warnings from webpack
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/button/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/dropdown/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/dropdown/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/icon/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/menu/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/icon/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/tooltip/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/icon/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
 ┌ /
 ├ /_app
 ├ /_document
 ├ /_error
 ├ /login
 └ /register

환경

패키지.json

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "LOG_API_REQUEST=y node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-brands-svg-icons": "^5.5.0",
    "@fortawesome/free-regular-svg-icons": "^5.5.0",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-less": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "ant-design-pro": "^2.2.1",
    "antd": "^3.13.2",
    "babel-plugin-import": "^1.11.0",
    "bootstrap": "^4.1.3",
    "express": "^4.16.4",
    "i": "^0.3.6",
    "isomorphic-unfetch": "^3.0.0",
    "less": "^3.9.0",
    "less-vars-to-js": "^1.3.0",
    "next": "^8.0.1",
    "node-sass": "^4.10.0",
    "npm": "^6.4.1",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-redux": "^5.1.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "http-proxy-middleware": "^0.19.1",
    "redux-devtools-extension": "^2.13.5"
  }
}

.babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      },
      "antd"
    ],
    [
      "import",
      {
        "libraryName": "ant-design-pro",
        "style": true,
        "camel2DashComponentName": false,
      },
      "ant-design-pro"
    ]
  ]
}

next.config.js

const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const fs = require('fs')
const path = require('path')

// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => { }
}

const isProd = process.env.NODE_ENV === 'production'

module.exports = withLess(withSass(withCSS({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: lessToJS(
      fs.readFileSync(path.resolve(__dirname, './assets/antd.less'), 'utf8')
    ),
  },
})))

출처

jaggerwang

👍1

가장 유용한 댓글

여기 사람들의 절반이 중국어(또는 무엇이든)로 응답하는 것을 보니 반갑습니다. 다음에 티켓을 열면 이탈리아어로 될 것입니다.

AmazingTurtle 에 2019년 08월 26일

👍34 😄20 👎9 👀1 😕1

모든 35 댓글

@jaggerwang 님 , 귀하의 문제는 문제 요구 사항을 준수하지 않아 종료되었습니다. 문제 도우미 를 사용하여 문제를 생성하십시오. 감사합니다!

@jaggerwang 안녕하세요. 효율적인 커뮤니케이션을 위해 해당 이슈에 대한 특정 형식 요구 사항이 있으며 요구 사항을 충족하지 않아 문제가 자동으로 종료됩니다. 문제 도우미 를 통해 문제를 만들어 오류를 찾을 수 있습니다. 협력 해주셔서 감사합니다!

ant-design-bot 에 2019년 02월 18일

👎9

문제에 대해 그렇게 높은 임계값을 설정해야 합니까? 이렇게 엄격한 요구 사항을 가진 오픈 소스 프로젝트를 본 적이 없습니다. 모든 프로젝트가 온라인으로 시연하기 쉬운 것은 아닙니다. 이 컴파일 및 패키징 오류는 매우 명확하게 설명되어 있으며 쉽게 재현할 수 있습니다.

jaggerwang 에 2019년 02월 18일

👍31 👎10

위층의 설명이 세심하게 준비되어있는 것이 유감입니다. 나는 또한 같은 문제가 발생했습니다. 어떻게 해결하셨나요?

bluenergy 에 2019년 02월 19일

👍5

@bluenergy는 해결되지 않았지만 작동하므로 먼저 넣어 보겠습니다. Antd에 문제를 언급하는 것은 정말 번거롭습니다. 다른 설명은 말하기 쉽지만 실제로 작동하는 예를 들어야 합니다. 코드는 비공개이며 전체 데모 예제가 나오는 데 많은 시간이 걸립니다. 핵심은 이 문제가 사용법과 거의 관련이 없고 주로 구성에 관한 것이며 재현하기 어렵지 않다는 것입니다. Antd Issues가 같은 레벨의 다른 프로젝트에 비해 너무 적은 것은 당연합니다.

jaggerwang 에 2019년 02월 20일

👍8 👎2

이렇게 엄격한 요구 사항을 가진 오픈 소스 프로젝트를 본 적이 없습니다.

사실 문제 도우미 전체의 개념은 vue 커뮤니티의 관행에 기반을 두고 있습니다.

번식하는 데 많은 에너지가 필요하고 우리의 능력 과 에너지도 제한되어 있습니다.우리는 더 많은 정보와 재현 가능한 피드백을 제공하는 사람들에게 제한된 자원을 우선시할 것입니다. 많은 문제(특히 웹팩 구성)가 온라인 코드샌드박스를 통해 제공될 수 없다는 것을 알고 있습니다.이러한 상황에서 재현할 수 있는 최소한의 git repo 저장소를 제공할 수 있습니다. 관련 정보와 이유는 vue 작성자 You Xiaoyou가 명확하게 작성했습니다.

Antd Issues가 같은 레벨의 다른 프로젝트에 비해 너무 적은 것은 당연합니다.

위의 프로젝트는 또한 엄격한 문제 도우미 및 자동 종료 기능을 제공하지만 문제 처리는 여전히 가장 효율적인 것 중 하나입니다. 하나는 우리가 더 부지런하고 다른 하나는 커뮤니티 학생들의 헌신이 많고 세 번째는 좋은 피드백은 당신과 나를 더 효율적으로 만들 수 있습니다.

마지막으로 @jaggerwang 의 피드백과 이해에 감사드립니다.

afc163 에 2019년 02월 22일

👍10 👎1

알았어요! 시간되실때 한번 받아보세요.

jaggerwang 에 2019년 02월 23일

@jaggerwang @afc163 도 create-react-app 를 사용하여 문제 를 재현하기 위한 babel-plugin-import 및 지연 로딩을 추가하고 antd 구성 요소를 사용하기 간단하고 자세한 레코드를 git 세부적으로 실행하고 yarn build 실행하면 다음 경고를 볼 수 있습니다.

이 문제를 풀기 위해 3개의 솔루션을 찾았습니다. 사용자의 편의를 위해 3개의 분기가 생성되었습니다. 조정 후 yarn build 실행 후 프롬프트가 더 이상 나타나지 않습니다.

수동 분기 , 수동으로 구성 요소 및 해당 스타일을 antd에서 직접 가져옵니다.
No-lazy 분기 , 지연 로딩을 사용하지 않거나 코드 분할을 사용하지 마십시오.
no-css-import 브랜치 , babel-plugin-import 사용 시 다음과 같이 설정한다. style 파일은 더 이상 컴포넌트와 온디맨드로 불러오지 않고, 컴포넌트만 불러오고, 스타일은 전체적으로 불러온다. 엔트리 파일. 이것은 일부 불필요한 구성 요소 스타일의 도입으로 이어지지만 대부분의 antd 구성 요소가 일반적으로 프로젝트에서 사용된다는 점을 고려하면 실제 패키지 CSS 볼륨이 많이 증가하지 않습니다.

"plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "libraryDirectory": "es"
    }
  ]
]

물론 이것들은 나의 일시적인 해결책이며 큰 사람들이 이유를 설명하고 더 많은 해결책을 제공할 수 있기를 바랍니다.

HaoChuan9421 에 2019년 03월 04일

👍8 🎉1

나는 또한이 문제, 다양한 스타일의 충돌이 있습니다.

wanliyunyan 에 2019년 03월 22일

나는 또한이 문제가 발생했습니다. 도와주세요!

makstr 에 2019년 03월 22일

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment -415345126

ztplz 에 2019년 03월 22일

React.lazy 도입했을 때도 같은 문제가 발생했습니다. 불행히도 큰 코드 기반에서 높은 수준의 코드 분할을 시작했지만 어떤 가져오기가 잘못된 순서로 되어 있는지 추적할 수 없었습니다.

bartimaeus 에 2019년 04월 21일

같은 문제가 있습니다. 도움을 주시면 감사하겠습니다. next-antd-aza-less - https://www.npmjs.com/package/next-antd-aza-less 를 추가하면 이 문제가 발생하기 시작했습니다.

danielsimao 에 2019년 04월 24일

umi 코드를 살펴본 후 웹팩 구성에 FilterCSSConflictingWarning 플러그인을 추가합니다.

lonsdale8734 에 2019년 05월 04일

@lonsdale8734 이 플러그인을 추가했습니다. 최신 버전에 여전히 문제가 있으면 저장소를 만드십시오. 우리는 그것을 살펴볼 것입니다.

ztplz 에 2019년 05월 04일

antd 구성 요소의 스타일은 독립적이고 스타일 파일 순서와 관련이 없기 때문입니다. 이 경고는 무시하거나 필터 를 사용하여 콘솔에서 건너뛸 수 있습니다.
그러나 이 문제를 해결하려면 다음과 같이 구성 요소 가져오기 순서를 유지하라는 mini-css-extract-plugin의 조언 을 참조할 수 있습니다.

import { Button, Table } from 'antd'; // File 1

import { Table, Button } from 'antd'; // File 2

import { Button, Table } from 'antd'; // File 1

import { Button, Table } from 'antd'; // File 2

다시 참고:스타일이 독립적이기 때문에 동일한 순서 없이 antd 구성 요소를 가져오는 것이 안전합니다.

zombieJ 에 2019년 05월 05일

👍11

@zombieJ
babel-plugin-import 에서 처리하는 것이 더 낫습니까?
biz 프로젝트에서 순서를 변경하는 것은 시간이 너무 많이 걸립니다.

xyy94813 에 2019년 05월 07일

@jaaggerwang
이 버그의 또 다른 이유는 lib dir에서 Component를 가져오기 때문입니다.

예:

import { Button } from 'antd'
import Dropdown from 'antd/lib/dropdown'

...

그리고 귀하의 프로젝트는 babel-plugin-import 를 더 적게 사용합니다.

오늘 우리는 케이스가 mini-css-extract-plugin 경고를 만들 수 있음을 발견했습니다.

xyy94813 에 2019년 05월 07일

👍1

나는 antd와 함께 사용자 정의 크라를 사용하고 있으며 동일한 문제가 있습니다. 이것은 내 코드이며 매우 간단하며이 오류가 발생했습니다.

const addMyPlugin = 구성 => {
...
};
module.exports = 재정의(
추가 내 플러그인,
fixBabelImports("가져오기", {
라이브러리 이름: "antd",
라이브러리 디렉토리: "es",
스타일: 사실
}),
addLessLoader({
자바스크립트 사용: 참,
수정변수: {
"@primary-color": "#0A4080"
}
})
);

shiqifeng2000 에 2019년 06월 17일

그것에 대한 해결책이 있습니까?

saostad 에 2019년 07월 30일

여기 사람들의 절반이 중국어(또는 무엇이든)로 응답하는 것을 보니 반갑습니다. 다음에 티켓을 열면 이탈리아어로 될 것입니다.

AmazingTurtle 에 2019년 08월 26일

👍34 😄20 👎9 👀1 😕1

@AmazingTurtle 알겠습니다. 하지만 개발자이고 Google 번역에 대해 들어본 적이 없다면 곤경에 처한 것입니다. 하하. 모든 사람이 영어를 구사하는 것은 아닙니다. 사실 대부분의 사람들은 말을 하지 않습니다...기다립니다...중국어(북경어).

Screen Shot 2019-09-19 at 2 22 35 AM

blujedis 에 2019년 09월 19일

👎8

@blujedis 브라우저에 내장된 번역 기능을 사용하고 있습니다(오른쪽 클릭 -> 번역). github.com이 언어를 EN으로 설정했기 때문에 EN을 소스 언어로 강제하므로 중국어를 번역하지 않습니다. 번역가는 한 번에 여러 언어를 번역할 수 없기 때문에 각 게시물을 복사하고 수동으로 번역하는 것을 좋아하지 않습니다.

AmazingTurtle 에 2019년 09월 19일

😕1

react-app-rewired 또는 유사품 및 스틱을 사용하여 disable mini-css-extract-plugin warning 방식으로 이동하는 사람들을 위해:

"mini-css-extract-plugin": "^0.8.0" 가 있는지 확인하십시오. 그렇지 않으면 추가하십시오(이 버전에는 주문 경고를 건너뛰는 추가 플래그가 있습니다)
config-overrides.js 에 이 ~(끔찍한 해킹)~을 추가하십시오.

  // force react-scripts to use newer version of `mini-css-extract-plugin` and ignore css ordering warnings
  // (related to issue: https://github.com/facok/create-react-app/issues/5372)
  for (let i = 0; i < config.plugins.length; i++) {
    const p = config.plugins[i]
    if(!!p.constructor && p.constructor.name === MiniCssExtractPlugin.name) {
      const miniCssExtractOptions = {...p.options, ignoreOrder: true}
      config.plugins[i] = new MiniCssExtractPlugin(miniCssExtractOptions)
      break
    }
  }

illyaMs 에 2019년 10월 21일

👍7 🚀1

메뉴, 드롭다운, 툴팁 간에 문제가 충돌하여 드롭다운을 외부로 옮겼습니다. 지금 작동 중입니다

에서

import { Menu, Dropdown, Button, Icon } from 'antd';

import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';

phattranky 에 2019년 12월 19일

👍2

솔루션이 모든 antd 구성 요소의 가져오기를 정렬하는 것처럼 쉽습니까?
이거 다시 열어도 될까요?!

ChuckJonas 에 2020년 02월 21일

👍1

@zombieJ 솔루션이 항상 작동하는 것은 아닙니다. 소규모 프로젝트의 모든 가져오기를 일관성 있게 구성했지만 여전히 이 문제가 표시됩니다.

다시 열어주세요...

ChuckJonas 에 2020년 02월 26일

Gastby 프로젝트에서 이와 동일한 문제를 보고 있습니다. 따라서 Create React App만이 아닙니다.

@ChuckJonas에 동의합니다. 다시 열어주세요.

@zombieJ ,

수입품을 알파벳순으로 나열하는 것만으로는 문제를 해결할 수 없다고 생각합니다. 나는 이미 이것을 하고 있다(Prettier/ESLint를 통해):

그리고 나는 문자 그대로 이러한 경고의 페이지 를 받고 있습니다.

devuxer 에 2020년 05월 14일

👍5

오류를 숨기기 위해 webpack-filter-warnings-plugin 을 설치

const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');

module.exports = {
  // ... rest of webpack config
  plugins: [
    new FilterWarningsPlugin({ 
      exclude: /Conflicting order/,
    })
  ]
}

toqitahamid 에 2020년 05월 30일

❤1 🎉1 👎1 👍1

앱이 실제로 100% 제대로 보이도록 하려면 경고를 숨기는 것은 좋은 생각이 아닙니다. 내가 찾은 유일한 실제 해결 방법은 babel 플러그인을 사용하는 대신 전체 스타일시트를 가져오는 것입니다.

ChuckJonas 에 2020년 06월 02일

👍1

다음을 얻었다

해결책을 찾았습니까?

510846 에 2020년 06월 10일

내 응용 프로그램 내에서 antd 구성 요소를 지연 로드하여 이 오류를 우회할 수 있습니다. NextJS의 예는 이러한 방식으로 로드하는 것입니다.

const Menu = dynamic(() => import('antd/lib/menu'))
const MenuItem = dynamic(() => import('antd/lib/menu/MenuItem'))

여기에서 antd의 메뉴 및 메뉴 항목을 제자리에 사용하거나 MenuItem 가 Menu.Item import {Menu} from 'antd' 구문을 사용할 수 있습니다.

지금까지 스타일 간의 충돌 순서 문제는 없습니다."
이는 less를 사용하고 babel-import-plugin을 사용하는 경우에 적용됩니다.

koolamusic 에 2020년 06월 10일

👍1

메뉴, 드롭다운, 툴팁 간에 문제가 충돌하여 드롭다운을 외부로 옮겼습니다. 지금 작동 중입니다
에서
import { Menu, Dropdown, Button, Icon } from 'antd';
NS
import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';

이것은 다음과 같이 antd/lib/button 와 별도로 모든 Button 를 가져와서 저에게 효과적이었습니다.

import { Form, Input, Row, Col } from 'antd'
import Button from 'antd/lib/button'

@phatranky님 감사합니다

Mehran91z 에 2020년 06월 10일

Antd와 관련된 경우 다음 두 가지를 수행하십시오.

babel-plugin-import의 style 옵션을 지정하여 스타일을 가져오는 경우 'css' 에서 true 하면 less 버전의 개미
당신의 스타일을 가져 오는 경우 'antd/dist/antd.css' ,로 변경 antd/dist/antd.less .

next.config.js 부분은 this nextjs-css-less-antd 에서 확인할 수 있습니다.

GermaVinsmoke 에 2020년 06월 18일

메뉴, 드롭다운, 툴팁 간에 문제가 충돌하여 드롭다운을 외부로 옮겼습니다. 지금 작동 중입니다
에서
import { Menu, Dropdown, Button, Icon } from 'antd';
NS
import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';

감사 해요! 나를 위해 작동합니다. 충돌하는 구성 요소는 별도로 가져와야 합니다. 저에게는 아래 3가지 구성 요소가 충돌하므로 다음과 같이 가져옵니다.

import { Button } from 'antd';
import Modal from 'antd/lib/modal';
import message from 'antd/lib/message';

예, 추하고 어리석은 것처럼 보이지만 그것이 문제를 해결하는 유일한 방법이라는 것을 압니다.

fengerzh 에 2020년 10월 22일

👍1

메뉴, 드롭다운, 툴팁 간에 문제가 충돌하여 드롭다운을 외부로 옮겼습니다. 지금 작동 중입니다
에서
import { Menu, Dropdown, Button, Icon } from 'antd';
NS
import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';
감사 해요! 나를 위해 작동합니다. 충돌하는 구성 요소는 별도로 가져와야 합니다. 저에게는 아래 3가지 구성 요소가 충돌하므로 다음과 같이 가져옵니다.
import { Button } from 'antd';
import Modal from 'antd/lib/modal';
import message from 'antd/lib/message';
예, 추하고 어리석은 것처럼 보이지만 그것이 문제를 해결하는 유일한 방법이라는 것을 압니다.

예, Modal을 별도로 가져올 때 경고가 사라졌습니다.

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

macshion 에 2020년 11월 03일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Ant-design: 컴파일 경고: 청크 스타일 [mini-css-extract-plugin] 충돌하는 순서...

문제

환경

가장 유용한 댓글

모든 35 댓글

관련 문제