如何避免警告:块样式 [mini-css-extract-plugin] GatsbyJS 中的顺序冲突? [英] How do I avoid the warning: chunk styles [mini-css-extract-plugin] Conflicting order in GatsbyJS?

问题描述

我正在使用 GatsbyJS 和 TypeScript 以及 gatsby-plugin-sass 插件.我正在尝试为组件导入单独的样式，如下例所示 - import './Card.scss'.

从'react'导入React；从../../constants/Colors"导入颜色；导入'./Card.scss'接口 CardProps {儿童:任何，填充?:数字，marginBottom?: 数字,边界半径?:数字，悬停?:布尔值，边界?:布尔值}const Card:React.FunctionComponent=({孩子，填充，marginBottom，borderRadius，悬停，边框})=>{const cardStyling = {backgroundColor: Colors.white,填充:填充，边距底部:边距底部，边界半径:边界半径，边框:(边框?'1px 实心#E8EAED':'0')，作为 React.CSSProperties;返回(<div style={cardStyling} className={hover ?'card-shadow card-hover card-padding':'card-shadow card-padding'}>{孩子们}

);}Card.defaultProps = {填充:40，底边距:20，边界半径:15，悬停:真实，边界:真实} 作为 Partial<CardProps>;导出默认卡；

但是，当我使用 gatsby build 时，我收到以下消息.

警告块样式 [mini-css-extract-plugin]冲突的顺序.添加了以下模块:* css ./node_modules/css-loader??ref--12-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-2!./node_modules/bootstrap/dist/css/bootstrap.css尽管它无法通过这些模块满足所需的排序:* 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-oneOf-1-3!./src/components/cards/style.scss- 无法满足块组组件的所需顺序---src-pages-404-tsx，组件---src-pages-handelsbetingelser-tsx，组件---src-pages-kontakt-tsx，组件---src-pages-priser-tsx，组件---src-pages-privatpolitik-tsx- 同时满足块组的所需顺序组件---src-pages-baggrund-tsx，组件---src-pages-betaling-tsx，组件---src-pages-din-rapport-tsx，组件---src-pages-foer-du-starter-tsx，组件---src-pages-hent-rapport-tsx，组件---src-pages-hvorfor-klagen-tsx, 组件---src-pages-newcase-tsx, 组件---src-pages-send-din-sag-tsx, 组件---src-pages-tak-tsx，组件---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-oneOf-1-3!./src/components/layout/MoveupContainer.scss- 无法满足块组组件的所需顺序---src-pages-404-tsx，组件---src-pages-blog-tsx，组件---src-pages-case-rosario-tsx, 组件---src-pages-handelsbetingelser-tsx, 组件---src-pages-kontakt-tsx,组件---src-pages-priser-tsx, 组件---src-pages-privatpolitik-tsx, 组件---src-pages-send-din-sag-tsx, 组件---src-pages-tak-tsx- 同时满足块组组件的所需顺序---src-templates-tag-tag-template-tsx，组件---src-templates-category-category-template-tsx，组件---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-oneOf-1-3!./src/components/blog/BlogCard.scss

我的主要导入是在布局文件中完成的，如下所示:

从 'react' 导入 React导入 'bootstrap/dist/css/bootstrap.css';导入 "slick-carousel/slick/slick.css";导入 "slick-carousel/slick/slick-theme.css";导入'scss/theme.scss'导入'scss/typography.scss'导入'scss/animations.scss'导入'scss/forms.scss'从'../calltoaction/CallToAction'导入CallToAction从'../footer/Footer'导入页脚；从'../navigation/ReactstrapNavbar'导入ReactstrapNavbar；接口组件道具{儿童:任何，位置:字符串，简单导航?:布尔值，showCallToAction?: 布尔值}const 布局:React.FunctionComponent=({孩子，位置，simpleNavigation，showCallToAction})=>{返回 (<div><ReactstrapNavbar location={location} simpleNavigation={simpleNavigation}/>{孩子们}{showCallToAction &&(<CallToAction/>)}<页脚/>

)}Layout.defaultProps = {简单导航:假，showCallToAction: 真} 作为 Partial<ComponentProps>;导出默认布局；

我只找到了有关如何抑制警告的信息.我想解决这个问题.我已经看到很多 Gatsby 模板使用相同的方法而没有警告.

你知道怎么解决吗?

解决方案

我不确定它是否也能解决您的问题，但就我而言，我不得不 在其中一个组件中按字母顺序重新排序导入

I'm using GatsbyJS and TypeScript along with the gatsby-plugin-sass plugin. I'm trying to import individual styling for components like the following example - 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;

However, I'm receiving the following message when I use 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

My main imports are done in the layout file like so:

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;

I have only found information on how to suppress the warning. I want to solve the problem. I have seen plenty of Gatsby templates using the same approach without the warnings.

Do you know how to solve it?

解决方案

I'm not sure it will fix your problem as well, but in my case I had to reorder the imports alphabetically in one of the components

这篇关于如何避免警告:块样式 [mini-css-extract-plugin] GatsbyJS 中的顺序冲突?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！