Mini-css-extract-plugin: How can I keep the css order in the css file when I use mini-css-extract-plugin？

[choyongjoon]

This issue is related to the issue from extract-text-webpack-plugin

How can ensure core.scss (global style which is included in the entry file) is before greenContainer.scss (component style which is included in a component file)?

Test repo: https://github.com/choyongjoon/webpack4-css-modules

Codes

index.js

import React from 'react'
import { render } from 'react-dom'

import App from 'App'
import 'styles/core.scss'

render(
  <App />,
  document.getElementById('root')
)

core.scss

:global {
  @import '~normalize.css/normalize';

  // override-bootstrap
  .bg-primary {
    background-color: red;
  }
}

App.js

import React from 'react'

import GreenContainer from 'components/GreenContainer'

export class App extends React.Component {
  render () {
    return (
      <GreenContainer />
    )
  }
}

export default App

greenContainer.js

import React from 'react'

import classes from './GreenContainer.scss'

export default class GreenContainer extends React.Component {
  render () {
    return (
      <div className={`bg-primary ${classes.greenContainer}`} />
    )
  }
}

greenContainer.scss

.greenContainer {
  height: 400px;
  // override core.scss
  background-color: green;
}

Result

main.css

.GreenContainer__greenContainer{background-color:green;height:100%}
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
...
.bg-primary{background-color:red}

[pshurygin]

You should import core.scss before you import App component.

[choyongjoon]

Thanks. I couldn't think about that.