How can I control the order of CSS with MiniCssExtractPlugin?

Question

{
        test: /\.module\.scss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
          {
            loader: 'css-loader',
            options: {
              modules: { localIdentName: '[local]---[hash:base64:5]' }
            }
          },
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: './src/css/_variables.scss'
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        exclude: /\.module\.scss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
          'css-loader',
          'sass-loader'
        ]
      },

...

plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css'
    })    
  ]

I am creating a single css file that includes some vanilla sass styles and some css module styles. Is there a way to control this so that the module css comes AFTER the regular css in the outputted bundle.css file? It's always before it right now.

I've tried reordering them in the package.json. I've tried using oneOf.

Answer 1

I had this issue in my React app and after a lot of banging my head against the wall, realized it was the order of my App and components relative to the other css import. In hindsight this was very obvious, but it took me a while to get there.

// Imports css-modules in App and components in App first
// followed by global styles
import App from '$containers/App';
import '$scss/global.css';
...
render((
  <App />
), document.getElementById('root'));

// Imports global styles first
// followed by css-modules in App and components in App
import '$scss/global.css';
import App from '$containers/App';
...
render((
  <App />
), document.getElementById('root'));

Answer 2

You just need to import by the order and you should be good like this

@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";
@import "~toastr/toastr";
@import "~react-select/dist/react-select.css";
@import "~react-bootstrap-table/dist/react-bootstrap-table-all.min.css";''

My webpack config

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
    ],
module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }

You can view my full webpack here