如何避免在GatsbyJS中出现警告:chunk styles [mini-css-extract-plugin] Conflicting order?

46

我正在使用 GatsbyJS 和 TypeScript 以及 gatsby-plugin-sass 插件。我正在尝试导入单独的组件样式,例如以下示例- 导入'./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;

然而,当我使用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 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;

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

你知道如何解决吗?


2
你能解决这个问题吗? - Peter W
我在gatsby配置文件中的gatsby-plugin-sass选项中添加了implementation: require('node-sass'),问题得到了解决。 - Sadaf Niknam
4个回答

22

我不确定这样做是否也能解决你的问题,但在我的情况下,我不得不按字母顺序重新排列一个组件中的导入 (参考链接)


1
这个方法有效的原因是在引用导入的地方,顺序必须保持一致;否则webpack在创建块时就不知道如何排序。如果按字母顺序适合您的需求,那很好 - 这也会解决问题。但是,如果您需要其他顺序,那也没关系。希望对您有所帮助! - cweekly
2
这对我解决了问题。我使用了这个插件让prettier运行:https://github.com/trivago/prettier-plugin-sort-imports,然后能够进行构建而没有OP中提到的问题。 - nstanard
3
值得注意的是,通常情况下不应自动排序导入。原因之一是模块可能具有副作用,因此更改导入顺序可能会破坏应用程序。 - TeoTN
谢谢@Paco,这对Vue组件也适用。 - Barney Szabolcs

12

0

我在使用 Ant Design Vue 时遇到了类似的错误。在我的 .babelrc 文件中,我不得不将 style 更改为 true


// .babelrc

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

0
在我的情况下,我将react-slick的css导入放在了所有其他导入之后。 import "slick-carousel/slick/slick.css" import "slick-carousel/slick/slick-theme.css"

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接