Estoy usando GatsbyJS y TypeScript junto con el complemento gatsby-plugin-sass. Estoy tratando de importar estilos individuales para componentes como el siguiente ejemplo: import './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;

Sin embargo, recibo el siguiente mensaje cuando uso 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

Mis importaciones principales se realizan en el archivo de diseño de la siguiente manera:

 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;

Solo he encontrado información sobre cómo suprimir la advertencia. Quiero resolver el problema. He visto muchas plantillas de Gatsby usando el mismo enfoque sin las advertencias.

sabes como resolverlo?