[英]How do I avoid the warning: chunk styles [mini-css-extract-plugin] Conflicting order in GatsbyJS?
I'm using GatsbyJS and TypeScript along with the gatsby-plugin-sass plugin.我正在使用 GatsbyJS 和 TypeScript 以及 gatsby-plugin-sass 插件。 I'm trying to import individual styling for components like the following example - import './Card.scss'.我正在尝试为组件导入单独的样式,如下例 - 导入“./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
.但是,当我使用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.我已经看到很多 Gatsby 模板使用相同的方法而没有警告。
Do you know how to solve it?你知道如何解决吗?
我不确定它是否也能解决您的问题,但在我的情况下,我不得不在其中一个组件中按字母顺序重新排序导入
The order needs to be consistent everywhere the imports are referenced;引用导入的所有地方的顺序都需要保持一致; otherwise webpack doesn't know how to order them when it creates the chunks.否则 webpack 在创建块时不知道如何对它们进行排序。
This comment (which happens to be in a CRA issue) explains it well: https://github.com/facebook/create-react-app/issues/5372#issuecomment-685932009这条评论(恰好在 CRA 问题中)解释得很好: https : //github.com/facebook/create-react-app/issues/5372#issuecomment-685932009
就我而言,我在所有其他导入之后移动了 react-slick css import。
import "slick-carousel/slick/slick.css" import "slick-carousel/slick/slick-theme.css"
I was getting similar errors using ant design vue.我在使用 ant design vue 时遇到了类似的错误。 In my .babelrc I had to change style to true在我的.babelrc 中,我必须将样式更改为true
// .babelrc
{
"plugins": [[
"import", {"libraryName": "ant-design-vue", "style": "true"}
]]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.