어떻게 하면 경고를 피할 수 있을까요? 청크 스타일 [mini-css-extract-plugin]개츠비 JS의 모순된 순서?

어떻게 하면 경고를 피할 수 있을까요? 청크 스타일 [mini-css-extract-plugin]개츠비 JS의 모순된 순서?

Gatsby JS와 Type Script를 gatsby-plugin-sass 플러그인과 함께 사용하고 있습니다.다음 예시와 같은 컴포넌트의 개별 스타일링을 Import하려고 합니다.「.Card.scss」를 Import합니다.

import React from 'react';
import Colors from '../../constants/Colors';
import './Card.scss'

interface CardProps {
  children: any,
  padding?: number,
  marginBottom?: number,
  borderRadius?: number,
  hover?: boolean,
  border?: boolean
}

const Card: React.FunctionComponent<CardProps> = ({ children, padding, marginBottom, borderRadius, hover, border }) => {

  const cardStyling = {
    backgroundColor: Colors.white,
    padding: padding,
    marginBottom: marginBottom,
    borderRadius: borderRadius,
    border: (border ? '1px solid #E8EAED' : '0'),
  } as React.CSSProperties;

  return(
      <div style={cardStyling} className={hover ? 'card-shadow card-hover card-padding' : 'card-shadow card-padding'}>
          {children}
      </div>
  );
}

Card.defaultProps = {
  padding: 40,
  marginBottom: 20,
  borderRadius: 15,
  hover: true,
  border: true
} as Partial<CardProps>;

export default Card;

하지만, 저는 다음 메시지를 받고 있습니다.gatsby build.

warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader??ref--12-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-2!./node_modules/bootstrap/dist/css/bootstrap.css
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
eOf-1-3!./src/components/cards/style.scss
   - couldn't fulfill desired order of chunk group(s) component---src-pages-404-tsx, component---src-pages-handelsbetingelser-tsx,
component---src-pages-kontakt-tsx, component---src-pages-priser-tsx, component---src-pages-privatpolitik-tsx
   - while fulfilling desired order of chunk group(s) component---src-pages-baggrund-tsx, component---src-pages-betaling-tsx,
component---src-pages-din-rapport-tsx, component---src-pages-foer-du-starter-tsx, component---src-pages-hent-rapport-tsx,
component---src-pages-hvorfor-klagen-tsx, component---src-pages-newcase-tsx, component---src-pages-send-din-sag-tsx, component---src-pages-tak-tsx,
 component---src-pages-vurdering-tsx
 * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
eOf-1-3!./src/components/layout/MoveupContainer.scss
   - couldn't fulfill desired order of chunk group(s) component---src-pages-404-tsx, component---src-pages-blog-tsx,
component---src-pages-case-rosario-tsx, component---src-pages-handelsbetingelser-tsx, component---src-pages-kontakt-tsx,
component---src-pages-priser-tsx, component---src-pages-privatpolitik-tsx, component---src-pages-send-din-sag-tsx, component---src-pages-tak-tsx
   - while fulfilling desired order of chunk group(s) component---src-templates-tag-tag-template-tsx,
component---src-templates-category-category-template-tsx, component---src-pages-hvorfor-klagen-tsx
 * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
eOf-1-3!./src/components/blog/BlogCard.scss

주요 Import는 다음과 같이 레이아웃 파일에서 수행됩니다.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.css';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import 'scss/theme.scss'
import 'scss/typography.scss'
import 'scss/animations.scss'
import 'scss/forms.scss'
import CallToAction from '../calltoaction/CallToAction'
import Footer from '../footer/Footer';
import ReactstrapNavbar from '../navigation/ReactstrapNavbar';

interface ComponentProps {
  children: any,
  location: string,
  simpleNavigation?: boolean,
  showCallToAction?: boolean
}

const Layout: React.FunctionComponent<ComponentProps> = ({ children, location, simpleNavigation, showCallToAction }) => {
    return (
        <div>
            <ReactstrapNavbar location={location} simpleNavigation={simpleNavigation} />
            {children}
            {showCallToAction && (
              <CallToAction />
            )}
            <Footer />
        </div>
    )
}

Layout.defaultProps = {
    simpleNavigation: false,
    showCallToAction: true
} as Partial<ComponentProps>;

export default Layout;

경고를 억제하는 방법에 대한 정보밖에 찾을 수 없었습니다.나는 그 문제를 해결하고 싶다.나는 경고 없이 같은 접근법을 사용하는 많은 개츠비 템플릿을 봐왔다.

어떻게 해결하는지 아세요?

문제가 해결될지는 모르겠지만, 제 경우 부품 중 하나에서 알파벳 순으로 수입품을 다시 주문해야 했습니다.

Import가 참조되는 모든 장소에서 순서가 일치해야 합니다.그렇지 않으면 웹 팩은 청크를 생성할 때 순서를 알 수 없습니다.

이 코멘트(공교롭게도 CRA 문제에 있습니다)는, https://github.com/facebook/create-react-app/issues/5372#issuecomment-685932009 를 참조해 주세요.

나의 경우, 다른 모든 수입품보다 react-slik css import를 옮겼습니다.

import "slick-carousel/slick/slick.css" import "slick-carousel/slick/slick-theme.css"

ant design vue를 사용했을 때 비슷한 오류가 발생하였습니다.내 .babelrc에서는 스타일을 true로 변경해야 했다.

// .babelrc

{
  "plugins": [[
    "import", {"libraryName": "ant-design-vue", "style": "true"}
  ]]
}

언급URL : https://stackoverflow.com/questions/60858885/how-do-i-avoid-the-warning-chunk-styles-mini-css-extract-plugin-conflicting-o