Comment éviter l'avertissement: Styles de morceau [Mini-CSS-Extract-Plugin] Ordre conflictuel dans Gatsbyjs?

Question

J'utilise Gatsbyjs et TypeScript avec le plug-in Gatsby-Plugin-Sass. J'essaie d'importer un style individuel pour des composants comme l'exemple suivant - Importation './card.scss'.

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;

Cependant, je reçois le message suivant lorsque j'utilise 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

Mes principales importations sont effectuées dans le fichier de mise en page comme suit:

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;

Je n'ai trouvé que des informations sur la manière de supprimer l'avertissement. Je veux résoudre le problème. J'ai vu beaucoup de modèles de Gatsby utilisant la même approche sans les avertissements.

Savez-vous comment résoudre?

Answer 1

Dans mon cas, j'ai déplacé l'importation de CSS Slick-Slick après toutes les autres importations.

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