Control CSS imports order for Next.js & webpack based production applications

by | Jul 4, 2020 | 0 comments

Solving mini-css-extract-plugin conflicting order warning

the Warning i've encountered:
Compiled with warnings
chunk styles [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-1!./node-modules/sass-loader/lib/loader.js??ref--6-2!./src/UI/containers/Gifts/SendGifts.scss
 * css ./node_modules/css-loader??ref--6-1!./node-modules/sass-loader/lib/loader.js??ref--6-2!./src/UI/components/Share/ShareFlag.component.scss
import React from 'react';
interface IProps {}
interface IState {}

export default class ScopedCSSComponent extends React.Component<IProps,IState> {
  public render(){
    return {
      <div className='scope-container'>
          <div className='class-one'> Info </div>
          <div className='class-two'> Info </div>
      </div>
    };
  }
}

// Any classes contained inside this container
// won't affect any other components style in the application
// as long as .scope-container is a unique class name.
.scope-container {
  .class-one {
    ...
  }
  .class-two {
    ...
  }
}
index.scss:
@import './components/components.scss';
@import './containers/containers.scss';
components.scss
@import './FirstComponent/FirstComponent.component.scss';
@import './SecondComponent/SecondComponent.component.scss';
@import './ThirdComponent/ThirdComponent.component.scss';

For this current project at work it didn’t make a big difference because the size of the css files was already pretty small, so loading them at once did not affect the project noticeably.

We also compress our files with gzip compression so the size difference was not an issue.

IF YOU GOT ANY VALUE SHARE 😄