CSS Problem after build, but not in development' environment. (chunk styles [mini-css-extract-plugin] Conflicting order.)

Description

My website is not displaying properly after gatsby build (or deployment on Gatsby Cloud) and my content is not showing, but it works just fine when I run gatsby develop. Whenever I try to run gatsby build, it runs successfully but shows following warning:

chunk styles [mini-css-extract-plugin] Conflicting order. Following module has been added: * css ./node_modules/css-loader??ref--14-oneOf-1-1!./node_modules/postcss-loader/src??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--14-oneOf-1-3!./src/components/footer.scss despite it was not able to fulfill desired ordering with these modules: * css ./node_modules/css-loader??ref--14-oneOf-1-1!./node_modules/postcss-loader/src??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--14-oneOf-1-3!./src/components/forms.scss - couldn't fulfill desired order of chunk group(s) component---src-pages-index-js * css ./node_modules/css-loader??ref--14-oneOf-1-1!./node_modules/postcss-loader/src??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--14-oneOf-1-3!./src/components/headerMain.scss - couldn't fulfill desired order of chunk group(s) component---src-pages-index-js - while fulfilling desired order of chunk group(s) component---src-pages-about-js, component---src-pages-books-js, component---src-pages-cart-js, component---src-pages-imprint-js, component---src-pages-product-details-js, component---src-pages-stockists-js

What I’ve tried so far to resolve this issue I’ve tried to follow instructions in this thread and it was suggested to re-order my imports. Since my project is rather small, this is not a problem, but maybe I’ve messed something up while doing so. I’m using global styles.

I’ve tried to only import my css only in the index.js (the error disappeared but the site was still displayed incorrectly after deployment)

and I’ve tried to use the sort-imports plugin in vsc. (nothing changed)

Steps to reproduce

gatsby develop
works fine, pages load, css correct

gatsby clean gatsby build gatsby serve css warning + pages not found 404

Expected result

After running gatsby build the website should look the same as in my development environment. (Content should show, CSS should behave like in development)

Actual result

The actual build looks different, and behaves differently. Also content is not showing. Completely different result to what I have in my development environment.

Environment

System:
OS: macOS 10.15.5
CPU: (8) x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.5.0 - /usr/local/bin/node
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 84.0.4147.125
Firefox: 78.0.2
Safari: 13.1.1
npmPackages:
gatsby: ^2.24.2 => 2.24.2
gatsby-cli: ^2.12.87 => 2.12.87
gatsby-image: ^2.4.12 => 2.4.12
gatsby-plugin-anchor-links: ^1.1.1 => 1.1.1
gatsby-plugin-favicon: ^3.1.6 => 3.1.6
gatsby-plugin-offline: ^3.2.9 => 3.2.9
gatsby-plugin-react-helmet: ^3.3.4 => 3.3.4
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-sass: ^2.3.4 => 2.3.4
gatsby-plugin-sharp: ^2.6.18 => 2.6.18
gatsby-plugin-smoothscroll: ^1.1.0 => 1.1.0
gatsby-plugin-snipcart: ^1.1.2 => 1.1.2
gatsby-plugin-snipcart-advanced: ^1.0.0 => 1.0.0
gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
gatsby-remark-images: ^3.3.10 => 3.3.10
gatsby-source-filesystem: ^2.0.28 => 2.0.28
gatsby-source-strapi: 0.0.12 => 0.0.12
gatsby-source-stripe: ^3.1.1 => 3.1.1
gatsby-transformer-remark: ^2.8.17 => 2.8.17
gatsby-transformer-sharp: ^2.5.10 => 2.5.10
npmGlobalPackages:
gatsby-cli: 2.5.9-ink.61

(I had to revert to gatsby-cli: 2.5.9-ink.61 since 2.12.87 was giving me an error when I tried to run gatsby info --clipboard. I’m using Gatsby CLI version: 2.12.87)

EDIT: Reproducing the issue should now be easier. And hopefully my issue is now easier to understand. 😃

[Steamforge]

I was having the same issues where gatsby build displayed differently than gatsby develop. My setup used css modules instead of sass. I solved it with the import ordering mentioned from @baloghrebecca and @coscakir.

I would prefer to have the component imports alphabetized but I’ll take “in order of appearance” and working. Thank you for the solution.

[coskuncakir]

hi @baloghrebecca, I had the same problem and I spent one day to solve it 😃

as you said, I arranged the imports like below and it worked.

import React from "react"
import Header from "../components/layout/header"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Title from "../components/typography/title"
import Footer from "../components/layout/footer"

export default function ServicesPage() {
  return (
    <>
      <Header />
      <Layout>
        <SEO title="Services" />
        <Title headingLevel="h1">Services</Title>
      </Layout>
      <Footer />
    </>
  )
}

Thanks!