如何避免警告：块样式 [mini-css-extract-plugin] GatsbyJS 中的冲突顺序？

Posted 2023-03-07

【中文标题】如何避免警告：块样式 [mini-css-extract-plugin] GatsbyJS 中的冲突顺序？

【英文标题】：How do I avoid the warning: chunk styles [mini-css-extract-plugin] Conflicting order in GatsbyJS?

【发布时间】：2020-07-06 14:12:01

【问题描述】：

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

但是，当我使用 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 模板使用相同的方法而没有警告。

你知道怎么解决吗？

【问题讨论】：

你能解决这个问题吗？

我在 gatsby 配置文件中添加了 implementation: require('node-sass') 到 gatsby-plugin-sass 选项，它解决了。

【参考方案1】：

我不确定它是否也能解决您的问题，但就我而言，我必须在其中一个组件中使用 reorder the imports alphabetically

【讨论】：

这个工作的原因是顺序需要在所有引用导入的地方保持一致；否则 webpack 在创建块时不知道如何对它们进行排序。如果字母表适合您的需求，那就太好了 - 这也可以解决这个问题。但是，如果您需要其他订单，那也没关系。 HTH！

这为我解决了这个问题。我让 prettier 使用这个插件运行：github.com/trivago/prettier-plugin-sort-imports 然后能够在没有 OP 中提到的问题的情况下进行构建。

值得注意的是，您通常不应自动对导入进行排序。一个原因是模块可能会产生副作用，因此更改导入顺序可能会破坏应用程序

【参考方案2】：

就我而言，我将 react-slick css import 移到所有其他导入之后。

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

【参考方案3】：

所有引用导入的地方的顺序都需要保持一致；否则 webpack 在创建块时不知道如何对它们进行排序。

这条评论（恰好出现在 CRA 问题中）很好地解释了这一点： https://github.com/facebook/create-react-app/issues/5372#issuecomment-685932009

【参考方案4】：

我在使用 ant design vue 时遇到了类似的错误。在我的 .babelrc 中，我必须将 style 更改为 true

// .babelrc


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